QQ空间发表日志的图片上传功能实现
Posted rsapaper
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了QQ空间发表日志的图片上传功能实现相关的知识，希望对你有一定的参考价值。
w间接促使了用户注意图片的顺序，进一步优化的方向的是手指触动或鼠标点击来同时进行图片的增删和调序，避免精确的数字输入。
有效code
1 <form action="wcon/wact" method="post" enctype="multipart/form-data"> 2 配图张数:<input type="text" name="winput" id="winput" WWclass="f1 easyui-textbox"> 3 <div id="wcontainer"></div> 4 </form> 5 <script type="text/javascript"> 6 document.getElementById("winput").addEventListener("change", wonchange); 7 function wonchange() { 8 var w = document.getElementById("winput").value; 9 var winnerhtml = \'<table>\'; 10 for (var wone = 0; wone < w; wone++) { 11 var newItem = document.createElement("tr") 12 var wnode = document.createElement("input") 13 newItem.appendChild(wnode) 14 wnode.type = "file" 15 wnode.name = "wimg" + wone 16 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 + \')" >\' 17 winsert += \'</td><td><img id="wpreview\' + wone + \'" src="" alt="第\' + (wone + 1) + \'张" >\'; 18 winsert += \'</td></tr>\' 19 winnerhtml += winsert; 20 } 21 winnerhtml += \'</table>\'; 22 $("#wcontainer").html(winnerhtml); 23 } 24 25 function previewFile(wone) { 26 var preview = document.getElementById(\'wpreview\' + wone); 27 var wtags = document.getElementsByClassName(\'where\'); 28 29 var file = wtags[wone].files[0] 30 31 var reader = new FileReader(); 32 reader.addEventListener("load", function () { 33 preview.src = reader.result; 34 }, false); 35 36 if (file) { 37 reader.readAsDataURL(file); 38 } 39 } 40 41 </script>
场景code
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>admin-index</title> 6 <link rel="stylesheet" type="text/css" href="/jquery-easyui-1.5.1/themes/default/easyui.css"> 7 <link rel="stylesheet" type="text/css" href="/jquery-easyui-1.5.1/themes/icon.css"> 8 <script type="text/javascript" src="/jquery-easyui-1.5.1/jquery.min.js"></script> 9 <script type="text/javascript" src="/jquery-easyui-1.5.1/jquery.easyui.min.js"></script> 10 </head> 11 12 13 <body> 14 <h2>testing</h2> 15 16 <div style="margin:20px 0 2em 0;"></div> 17 <div class="easyui-tabs"> 18 <div title="销量" style="padding:2em"> 19 <p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p> 20 </div> 21 <div title="在售" data-options="iconCls:\'icon-ok\',closable:true" style="padding:2em"> 22 <p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p> 23 </div> 24 <div title="调价" data-options="iconCls:\'icon-redo\',closable:true" style="padding:2em"> 25 This is the help content. 26 </div> 27 <div title="新品" data-options="iconCls:\'icon-add\',closable:true" style="padding:2em"> 28 <div class="easyui-panel" title="Ajax Form" style="padding:2em;"> 29 <form id="ff" action="wcon/wact" method="post" enctype="multipart/form-data"> 30 <table> 31 <tr> 32 <td>名称:</td> 33 <td><input name="w0" class="f1 easyui-textbox"></td> 34 </tr> 35 <tr> 36 <td>描述:</td> 37 <td><input data-options="multiline:true" name="w1" class="f1 easyui-textbox"></td> 38 </tr> 39 <tr> 40 <td>进价:</td> 41 <td><input name="w2" class="f1 easyui-textbox"></td> 42 </tr> 43 <tr> 44 <td>售价:</td> 45 <td><input name="w3" class="f1 easyui-textbox"></td> 46 </tr> 47 <tr> 48 <td>开售:</td> 49 <td><input type="radio" name="w4" value="1" checked>是 50 <input type="radio" name="w4" value="0">否 51 </td> 52 </tr> 53 <tr> 54 <td>配图张数:<input type="text" name="winput" id="winput" WWclass="f1 easyui-textbox"></td> 55 </tr> 56 <tr> 57 <td></td> 58 <td><input type="submit" value="提交"></td> 59 </tr> 60 </table> 61 <div id="wcontainer"></div> 62 </form> 63 </div> 64 </div> 65 <div title="下架" data-options="iconCls:\'icon-remove\',closable:true" style="padding:2em"> 66 This is the help content. 67 </div> 68 <div title="库存" data-options="iconCls:\'icon-lock\',closable:true" style="padding:2em"> 69 This is the help content. 70 </div> 71 <div title="BI" data-options="iconCls:\'icon-more\',closable:true" style="padding:2em"> 72 This is the help content. 73 </div> 74 <div title="Help" data-options="iconCls:\'icon-help\',closable:true" style="padding:2em"> 75 This is the help content. 76 </div> 77 </div> 78 79 80 </body> 81 </html> 82 83 <script type="text/javascript"> 84 document.getElementById("winput").addEventListener("change", wonchange); 85 function wonchange() { 86 var w = document.getElementById("winput").value; 87 var winnerhtml = \'<table>\'; 88 for (var wone = 0; wone < w; wone++) { 89 var newItem = document.createElement("tr") 90 var wnode = document.createElement("input") 91 newItem.appendChild(wnode) 92 wnode.type = "file" 93 wnode.name = "wimg" + wone 94 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 + \')" >\' 95 winsert += \'</td><td><img id="wpreview\' + wone + \'" src="" alt="第\' + (wone + 1) + \'张" >\'; 96 winsert += \'</td></tr>\' 97 winnerhtml += winsert; 98 } 99 winnerhtml += \'</table>\'; 100 $("#wcontainer").html(winnerhtml); 101 } 102 103 function previewFile(wone) { 10以上是关于QQ空间发表日志的图片上传功能实现的主要内容，如果未能解决你的问题，请参考以下文章