w间接促使了用户注意图片的顺序，进一步优化的方向的是手指触动或鼠标点击来同时进行图片的增删和调序，避免精确的数字输入。
有效code
<form action="wcon/wact" method="post" enctype="multipart/form-data">
配图张数:<input type="text" name="winput" id="winput" WWclass="f1 easyui-textbox">
<div id="wcontainer"></div>
</form>
<script type="text/javascript">
document.getElementById("winput").addEventListener("change", wonchange);
function wonchange() {
var w = document.getElementById("winput").value;
var winnerhtml = '<table>';
for (var wone = 0; wone < w; wone++) {
var newItem = document.createElement("tr")
var wnode = document.createElement("input")
newItem.appendChild(wnode)
wnode.type = "file"
wnode.name = "wimg" + wone
var winsert = '<tr><td><span style="color: red">第' + (wone + 1) + '张</span></td><td><input class="where" type="file" name="wimg' + wone + '" id="wimg' + wone + '" onchange="previewFile(' + wone + ')" >'
winsert += '</td><td><img id="wpreview' + wone + '" src="" alt="第' + (wone + 1) + '张" >';
winsert += '</td></tr>'
winnerhtml += winsert;
}
winnerhtml += '</table>';
$("#wcontainer").html(winnerhtml);
} function previewFile(wone) {
var preview = document.getElementById('wpreview' + wone);
var wtags = document.getElementsByClassName('where'); var file = wtags[wone].files[0] var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false); if (file) {
reader.readAsDataURL(file);
}
} </script>
场景code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>admin-index</title>
<link rel="stylesheet" type="text/css" href="/jquery-easyui-1.5.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/jquery-easyui-1.5.1/themes/icon.css">
<script type="text/javascript" src="/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
</head> <body>
<h2>testing</h2> <div style="margin:20px 0 2em 0;"></div>
<div class="easyui-tabs">
<div title="销量" style="padding:2em">
<p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
</div>
<div title="在售" data-options="iconCls:'icon-ok',closable:true" style="padding:2em">
<p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
</div>
<div title="调价" data-options="iconCls:'icon-redo',closable:true" style="padding:2em">
This is the help content.
</div>
<div title="新品" data-options="iconCls:'icon-add',closable:true" style="padding:2em">
<div class="easyui-panel" title="Ajax Form" style="padding:2em;">
<form id="ff" action="wcon/wact" method="post" enctype="multipart/form-data">
<table>
<tr>
<td>名称:</td>
<td><input name="w0" class="f1 easyui-textbox"></td>
</tr>
<tr>
<td>描述:</td>
<td><input data-options="multiline:true" name="w1" class="f1 easyui-textbox"></td>
</tr>
<tr>
<td>进价:</td>
<td><input name="w2" class="f1 easyui-textbox"></td>
</tr>
<tr>
<td>售价:</td>
<td><input name="w3" class="f1 easyui-textbox"></td>
</tr>
<tr>
<td>开售:</td>
<td><input type="radio" name="w4" value="1" checked>是
<input type="radio" name="w4" value="0">否
</td>
</tr>
<tr>
<td>配图张数:<input type="text" name="winput" id="winput" WWclass="f1 easyui-textbox"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="提交"></td>
</tr>
</table>
<div id="wcontainer"></div>
</form>
</div>
</div>
<div title="下架" data-options="iconCls:'icon-remove',closable:true" style="padding:2em">
This is the help content.
</div>
<div title="库存" data-options="iconCls:'icon-lock',closable:true" style="padding:2em">
This is the help content.
</div>
<div title="BI" data-options="iconCls:'icon-more',closable:true" style="padding:2em">
This is the help content.
</div>
<div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:2em">
This is the help content.
</div>
</div> </body>
</html> <script type="text/javascript">
document.getElementById("winput").addEventListener("change", wonchange);
function wonchange() {
var w = document.getElementById("winput").value;
var winnerhtml = '<table>';
for (var wone = 0; wone < w; wone++) {
var newItem = document.createElement("tr")
var wnode = document.createElement("input")
newItem.appendChild(wnode)
wnode.type = "file"
wnode.name = "wimg" + wone
var winsert = '<tr><td><span style="color: red">第' + (wone + 1) + '张</span></td><td><input class="where" type="file" name="wimg' + wone + '" id="wimg' + wone + '" onchange="previewFile(' + wone + ')" >'
winsert += '</td><td><img id="wpreview' + wone + '" src="" alt="第' + (wone + 1) + '张" >';
winsert += '</td></tr>'
winnerhtml += winsert;
}
winnerhtml += '</table>';
$("#wcontainer").html(winnerhtml);
} function previewFile(wone) {
var preview = document.getElementById('wpreview' + wone);
var wtags = document.getElementsByClassName('where'); var file = wtags[wone].files[0] var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false); if (file) {
reader.readAsDataURL(file);
}
} // $(function () {
// $('#ff').form({
// success: function (result) {
// var result = eval('(' + result + ')');
// $.messager.show({
// title: 'Info',
// msg: result.Msg
// });
// }
// });
// }); </script>
w本地多图预览、多图上传、排序，用户仅需两次操作：决定选哪几张图和图的顺序，尽量减少用户操作。
