特效描述:html5 拖拽排序 多图片上传插件,html5实现多图多文件上传与拖拽上传,拖拽排序功能。支持上传图片替换、图片删除、预览等功能。
1. 引入CSS
1 | < link rel = "stylesheet" href = "upload.css" > |
2. 引入JS
1 2 | < script src = "jquery.min.js" ></ script > < script src = "jQuery.upload.min.js" ></ script > |
3. HTML代码
<h1>upload h5图片文件上传插件</h1> <p> 实现多图多文件上传与拖拽上传,拖拽排序功能。<br /> 该插件是自己在项目中使用的,由于自己项目组的习惯,所有参数都写在标签上的。 </p> <h2>案例一:默认无参数</h2> <div class="case"> <div class="upload" action='upload.html' id='case1'></div> </div> <h2>案例二:单个图片上传</h2> <div class="case"> <div class="upload" action='upload.html' data-num='1' id='case2'></div> </div> <h2>案例三:查看图片信息</h2> <div class="case"> <div class="upload" action='upload.html' data-value='1.png' id='case3'></div> </div> <h2>引用文件:</h2> <pre> <script src="jquery.min.js"></script> <script src="jQuery.upload.mini.js"></script> <link rel="stylesheet" href="upload.css"> </pre> <h2>调用代码:</h2> <pre> <div class="upload" id="case" data-num="10" data-type="zip,pdf,doc,docx"></div> <script type="text/javascript"> $(function(){ $("#case").upload( //该函数为点击放大镜的回调函数,如没有该函数,则不显示放大镜 function(_this,data){ console.log(data) } ); }) </script></pre> <h2>参数配置:</h2> <table border='1' cellspacing="0" bordercolor="#d7d7d7" style="border-collapse:collapse;"> <tr> <td width='120'>标签</td> <td width="300">默认值</td> <td>说明</td> </tr> <tr> <td>data-height</td> <td>0</td> <td>图片上传压缩最大高度,0则根据宽度等比例压缩</td> </tr> <tr> <td>data-width</td> <td>1920</td> <td>图片上传压缩最大宽度,0则根据高度等比例压缩</td> </tr> <tr> <td>data-type</td> <td>png,jpg,jpeg,gif</td> <td>允许上传文件的扩展名,多个扩展名用逗号分割,支持非图片格式的文件上传</td> </tr> <tr> <td>data-file</td> <td>file</td> <td>上传提交服务器的表单名</td> </tr> <tr> <td>data-name</td> <td>uoload</td> <td>最终表单提交图片路径的表单名</td> </tr> <tr> <td>action</td> <td>/upload.php</td> <td>服务器接收上传文件的地址,服务器需返回{"code":1,"msg":"/upload/1.jpg"}的JSON字符串,code为上传状态,1为成功,0为失败,msg为成功的文件路径或失败原因提示!</td> </tr> <tr> <td>data-num</td> <td>10</td> <td>最多可以上传多少个文件,如为1,上传插件为单个文件上传样式</td> </tr> <tr> <td>data-size</td> <td>20480</td> <td>文件上传单个文件最大容量,图片不传不受该属性限制</td> </tr> <tr> <td>data-value</td> <td>null</td> <td>已经上传成功的文件名,多个文件用英文逗号分割</td> </tr> </table>