html5拖拽排序多图片上传插件



386 1540 514



特效描述:html5 拖拽排序 多图片上传插件,html5实现多图多文件上传与拖拽上传,拖拽排序功能。支持上传图片替换、图片删除、预览等功能。

代码结构

1. 引入CSS

<link rel="stylesheet" href="upload.css">

2. 引入JS

<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>
&lt;script src="jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="jQuery.upload.mini.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="upload.css"&gt;
	</pre>
	<h2>调用代码:</h2>
	<pre>
&lt;div class="upload" id="case" data-num="10" data-type="zip,pdf,doc,docx"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
	$(function(){
		$("#case").upload(
			//该函数为点击放大镜的回调函数,如没有该函数,则不显示放大镜
			function(_this,data){
				console.log(data) 
			}
		);
	})
&lt;/script&gt;</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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册
龚泽沁
龚泽沁 :  java后台应该用什么参数来接收?
2019-05-03 18:51:55


热门标签: 拖动 拖拽 拖动插件 拖拽插件 切换按钮 表单 表单美化 表单插件 表单美化插件 头像上传 图片上传 拖动排序 拖拽排序

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到