WEB版一次選擇多個檔案進行批量上傳(WebUploader)的解決方案
阿新 • • 發佈：2019-02-05
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebUploaderFileByBaidu2.aspx.cs" Inherits="WebApplication1.WebUploaderFileByBaidu2" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>WebUploader檔案上傳示例</title> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script> <link href="Scripts/webuploader/webuploader.css" rel="stylesheet" /> <script type="text/javascript" src="Scripts/webuploader/webuploader.min.js"></script> <link href="https://cdn.bootcss.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/> <link href="Scripts/style.css" rel="stylesheet" /> <link href="Scripts/demo.css" rel="stylesheet" /> <link href="Scripts/font-awesome.css" rel="stylesheet" /><script type="text/javascript"> var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../"; // 檔案上傳 jQuery(function () { var $ = jQuery, $list = $('#fileList'), $btn = $('#ctlBtn'), state = 'pending', uploader; uploader = WebUploader.create({ // 不壓縮image resize: false, // swf檔案路徑 swf: applicationPath + 'Script/webuploader/Uploader.swf', // 檔案接收服務端。 server: 'UploaderFileByBaidu.ashx', // 選擇檔案的按鈕。可選。 // 內部根據當前執行是建立，可能是input元素，也可能是flash. pick: '#picker' }); // 當有檔案新增進來的時候 uploader.on('fileQueued', function (file) { $list.append('<div background-color: #f5f5f5; color: #000000;">' + file.id + '" class="item">' + '<h4 class="info">' + file.name + '</h4>' + '<p class="state">等待上傳...</p>' + '</div>'); }); // 檔案上傳過程中建立進度條實時顯示。 uploader.on('uploadProgress', function (file, percentage) { var $li = $('#' + file.id), $percent = $li.find('.progress .progress-bar'); // 避免重複建立 if (!$percent.length) { $percent = $('<div class="progress progress-striped active">' + '<div class="progress-bar" role="progressbar" style="width: 0%">' + '</div>' + '</div>').appendTo($li).find('.progress-bar'); } $li.find('p.state').text('上傳中'); $percent.css('width', percentage * 100 + '%'); }); uploader.on('uploadSuccess', function (file) { $('#' + file.id).find('p.state').text('已上傳'); }); uploader.on('uploadError', function (file) { $('#' + file.id).find('p.state').text('上傳出錯'); }); uploader.on('uploadComplete', function (file) { $('#' + file.id).find('.progress').fadeOut(); }); uploader.on('all', function (type) { if (type === 'startUpload') { state = 'uploading'; } else if (type === 'stopUpload') { state = 'paused'; } else if (type === 'uploadFinished') { state = 'done'; } if (state === 'uploading') { $btn.text('暫停上傳'); } else { $btn.text('開始上傳'); } }); $btn.on('click', function () { if (state === 'uploading') { uploader.stop(); } else { uploader.upload(); } }); }); </script> </head> <body> <div class="container-fluid"> <div class="col-md-10"> <div class="row">檔案上傳示例：</div> <div class="row"> <div id="uploader" class="wu-example"> <!--用來存放檔案資訊--> <div id="fileList" class="uploader-list"></div> <div class="btns"> <div id="picker" class="btn btn-primary">選擇檔案</div> </div> </div> </div> <div class="row"> </div> <div class="row"> <button id="ctlBtn" class="btn btn-default">開始上傳</button></div> </div> <div> </div> </div> </body> </html>