html5拖拽排序多圖片上傳插件



398 1590 531



特效描述: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

加群請備注:從官網了解到

老夫子电子