jQuery文件上傳插件jQuery Upload File 有上傳進度條

時間 2019-11-24

標籤 jquery 文件上傳插件 upload file 進度欄目 JQuery 简体版

原文原文鏈接

jQuery文件上傳插件jQuery Upload File 有上傳進度條

jQuery文件上傳插件jQuery Upload File，插件使用簡單，支持單文件和多文件上傳，支持文件拖拽上傳，有進度條顯示。標準HTML form文件上傳，也就是說，只要服務端支持接收multipart/form-data格式數據就能使用此上傳插件。css

本站web端文件文件提交即便用此插件，效果以下：前端

瀏覽器支持

瀏覽器支持：IE 8.0,IE 9.0,IE 10.0,Firefox,Safari,Opera,Chrome
支持文件拖拽上傳的瀏覽器：IE10+,Firefox,Safari,Opera,Chromejquery

使用方法

1.在頁面head節點添加css和js文件引用git

<link href="/jQuery-Upload-File/uploadfile.min.css" rel="stylesheet">
<script src="/jquery/1.9.1/jquery.min.js"></script>
<script src="/jQuery-Upload-File/jquery.uploadfile.min.js"></script>

因爲此插件依賴jQuery插件，所以以上示例也添加了就jQuery庫的引用。別外在jQuery Upload File的源碼中引用在jQuery Form插件，在使用時應作相應檢查，確保jQuery Form插件的可訪問性。github

2.在頁面的body節點中添加一個div處理上傳文件web

<div id="fileuploader">Upload</div>

3.添加js啓動腳本ajax

$(document).ready(function()
{
    $("#fileuploader").uploadFile({
        url:"文件上傳url",
    fileName:"myfile"
    });
});

本站的初始化示例

本站上傳文章封面圖時使用了jQuery Upload File插件，用於前端數據提交。json

$("#fileuploader").uploadFile({
    url:"/file/upload",                 //文件上傳url
    fileName:"image",               //提交到服務器的文件名
    maxFileCount: 1,                //上傳文件個數（多個時修改此處
    returnType: 'json',              //服務返回數據
    allowedTypes: 'jpg,jpeg,png,gif',  //容許上傳的文件式
    showDone: false,                     //是否顯示"Done"(完成)按鈕
    showDelete: true,                  //是否顯示"Delete"(刪除)按鈕
    onLoad: function(obj)
    {
        //頁面加載時，onLoad回調。若是有須要在頁面初始化時顯示（好比：文件修改時）的文件須要在此方法中處理
        obj.createProgress('/tmpImage.jpg');      //createProgress方法能夠建立一個已上傳的文件
    },
    deleteCallback: function(data,pd)
    {
        //文件刪除時的回調方法。
        //如：如下ajax方法爲調用服務器端刪除方法刪除服務器端的文件
        $.ajax({
            cache: false,
            url: "file/upload",
            type: "DELETE",
            dataType: "json",
            data: {file:data.url},
            success: function(data) 
            {
                if(data.code===0){
                    pd.statusbar.hide();        //刪除成功後隱藏進度條等
                    $('#image').val('');
                 }else{
                        console.log(data.message);  //打印服務器返回的錯誤信息
                 }
              }
        }); 
    },
    onSuccess: function(files,data,xhr,pd)
    {
        //上傳成功後的回調方法。本例中是將返回的文件名保到一個hidden類開的input中，以便後期數據處理
        if(data&&data.code===0){
            $('#image').val(data.url);
        }
    }
});