欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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拖拽排序多圖片上傳插件特效源碼

    html5實現(xiàn)多圖多文件上傳與拖拽上傳,拖拽排序功能。支持上傳圖片替換、圖片刪除、預(yù)覽等功能。本段代碼可以在各個網(wǎng)頁使用,有需要的朋友可以直接下載使用
    2018-04-02
  • HTML5 拖拽批量上傳文件的示例代碼

    這篇文章主要介紹了HTML5 拖拽批量上傳文件的示例代碼的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-28
  • html5使用Drag事件編輯器拖拽上傳圖片的示例代碼

    這篇文章主要介紹了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-05
  • HTML5 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-08
  • HTML5拖拽文件到瀏覽器并實現(xiàn)文件上傳下載功能代碼

    使用HTML5拖拽文件到瀏覽器并實現(xiàn)文件上傳下載,html5的功能是越來越強(qiáng)大了,下面與大家分享下具體的實現(xiàn)代碼,感興趣的朋友可以參考下哈
    2013-06-06
  • html5 拖拽上傳圖片實例演示

    拖拽上傳最重要的就是js部分的代碼,它實現(xiàn)了70%的功能,另外30%僅僅是把圖片信息提交到后臺,然后做對應(yīng)的處理,比如壓縮啊,裁剪啊云云,感興趣的朋友可以參考下哈,希望
    2013-04-01
  • HTML5拖拽文件上傳的示例代碼

    這篇文章主要介紹了HTML5拖拽文件上傳的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)
    2021-03-04

最新評論