html5實現(xiàn)多圖片預(yù)覽上傳及點(diǎn)擊可拖拽控件
發(fā)布時間:2018-03-15 15:55:49 作者:阿木俠
我要評論

這篇文章主要介紹了html5實現(xiàn)多圖片預(yù)覽上傳及點(diǎn)擊可拖拽控件的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
在做圖片上傳時發(fā)現(xiàn)一個蠻好用的控件,支持多張圖片同時上傳,可以點(diǎn)擊選擇圖片,也可以將圖片拖拽到上傳框直接上傳,方便,好用,接口也簡單,基本可以直接放到項目里使用。
先看看他的樣式:
選擇圖片后:
$(function(){ // 初始化插件 $("#demo").zyUpload({ width : "650px", // 寬度 height : "400px", // 寬度 itemWidth : "120px", // 文件項的寬度 itemHeight : "100px", // 文件項的高度 url : "/upload/UploadAction", // 上傳文件的路徑 multiple : true, // 是否可以多個文件上傳 dragDrop : true, // 是否可以拖動上傳文件 del : true, // 是否可以刪除文件 finishDel : false, // 是否在上傳文件完成后刪除預(yù)覽 /* 外部獲得的回調(diào)接口 */ onSelect: function(files, allFiles){ // 選擇文件的回調(diào)方法 console.info("當(dāng)前選擇了以下文件:"); console.info(files); console.info("之前沒上傳的文件:"); console.info(allFiles); }, onDelete: function(file, surplusFiles){ // 刪除一個文件的回調(diào)方法 console.info("當(dāng)前刪除了此文件:"); console.info(file); console.info("當(dāng)前剩余的文件:"); console.info(surplusFiles); }, onSuccess: function(file){ // 文件上傳成功的回調(diào)方法 console.info("此文件上傳成功:"); console.info(file); }, onFailure: function(file){ // 文件上傳失敗的回調(diào)方法 console.info("此文件上傳失?。?quot;); console.info(file); }, onComplete: function(responseInfo){ // 上傳完成的回調(diào)方法 console.info("文件上傳完成"); console.info(responseInfo); } }); });
直接在demo.js里修改配置,url : "/upload/UploadAction" 放你的圖片上傳action,這個控件只是前臺處理,后臺的上傳還得自己寫
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
- html5實現(xiàn)多圖多文件上傳與拖拽上傳,拖拽排序功能。支持上傳圖片替換、圖片刪除、預(yù)覽等功能。本段代碼可以在各個網(wǎng)頁使用,有需要的朋友可以直接下載使用2018-04-02
- 這篇文章主要介紹了HTML5 拖拽批量上傳文件的示例代碼的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-03-28
- 這篇文章主要介紹了html5使用Drag事件編輯器拖拽上傳圖片的示例代碼的相關(guān)資料,需要的朋友可以參考下2017-08-22
HTML5+CSS3實現(xiàn)無插件拖拽上傳圖片(支持預(yù)覽與批量)
本篇文章主要介紹了HTML5+CSS3實現(xiàn)無插件拖拽上傳圖片(支持預(yù)覽與批量),現(xiàn)在html5提供了API以及File,F(xiàn)ileReader,XMLHttpRequest等強(qiáng)大的API,為我們拖放實現(xiàn)上傳提供2017-01-05HTML5 canvas實現(xiàn)移動端上傳頭像拖拽裁剪效果
這篇文章主要為大家詳細(xì)介紹了HTML5 canvas實現(xiàn)移動端上傳頭像拖拽裁剪效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-03-14結(jié)合html5+nodejs+express實現(xiàn)拖拽上傳的功能
html5開始支持拖拽上傳的需要的api。nodejs也是一個最近越來越流行的技術(shù),在nodejs開發(fā)中,最常用的開發(fā)框架之一是expess,它是一個類似mvc模式的框架。2014-08-08HTML5拖拽文件到瀏覽器并實現(xiàn)文件上傳下載功能代碼
使用HTML5拖拽文件到瀏覽器并實現(xiàn)文件上傳下載,html5的功能是越來越強(qiáng)大了,下面與大家分享下具體的實現(xiàn)代碼,感興趣的朋友可以參考下哈2013-06-06- 拖拽上傳最重要的就是js部分的代碼,它實現(xiàn)了70%的功能,另外30%僅僅是把圖片信息提交到后臺,然后做對應(yīng)的處理,比如壓縮啊,裁剪啊云云,感興趣的朋友可以參考下哈,希望2013-04-01
- 這篇文章主要介紹了HTML5拖拽文件上傳的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)2021-03-04