文件上傳plupload組件使用


這段時間一直在使用文件上傳,簡要的介紹一下文件上傳的組件使用,先上一段代碼。

 

var uploader = new plupload.Uploader(
	{
		//用來指定上傳方式,指定多個上傳方式請使用逗號隔開,默認即為此,可不寫
		runtimes : 'html5,flash,silverlight,html4',
		//點擊上傳html標簽的id,可以是a,button等
		browse_button : 'hideBtn',
		//服務器端的頁面上傳地址
		url : url,
		//文件的最大上傳大小,不寫該參數則上傳文件大小無限制
		max_file_size : '20mb',
		//設置多項選擇,默認為true,即可多選文件,功能為單選時需將此設為false
		multi_selection : true,
		//上傳的文件生成一個唯一的文件名,默認為false,false時上傳文件為本身的名字,true時自動生成其他名字
		unique_names : true,
		//可以使用該參數來限制上傳文件的類型,大小等,該參數以對象的形式傳入
		filters : [
			{title: "Image files", extensions: "jpg,gif,png,jpeg"},
	                {title: "Zip files", extensions: "zip"},
	                {title: "file files", extensions: "doc,docx,xls,xlsx,ppt,pptx,txt,pdf"}
			],
			//flash地址,swf文件,當需要使用swf方式進行上傳時需要配置該參數
			flash_swf_url : '../../../../sikns/js/Moxie.swf',
			//silverlight文件,當需要使用silverlight方式進行上傳時需要配置該參數
			silverlight_xap_url : '../../../../sikns/js/Moxie.xap',
			//當Plupload初始化完成后觸發
init : { //文件上傳前觸發 BeforeUpload : function(up, file){ /*事先做個校驗,違反校驗的情況下,將文件上傳傳輸組件暫停*/ /*up.stop(); up.removeFile(file);*/ } }, //當文件添加到上傳隊列后觸發(up為當前的plupload實例對象,files為一個數組,里面的元素為本次添加到上傳隊列里的文件對象) FilesAdded : function(up, files) { /*plupload.each(files,function(file) { document.getElementById('filelist').value += file.name+";"; });*/ //開始上傳隊列中的文件 uploader.start(); }, //會在文件上傳過程中不斷觸發,可以用此事件來顯示上傳進度(up當前的plupload實例對象,file為觸發此事件的文件對象) UploadProgress : function(up, file) { }, //傳輸完成后添加事件 UploadComplete : function(up,files){ } } }); //初始化Plupload實例 uploader.init();

  這段代碼是文件上傳的js部分,里面各個部分的函數注解的很清楚。

調用這個js的部分按鈕如下:

<div class="input-group" style="width: 100%">
    <input class="form-control ue-form" id="filelist" type="text"   placeholder="選擇上傳文件" readonly>
    <div class="input-group-addon ue-form-btn" id="inputfiles">
    <span class="fa fa-upload"></span>
    </div>
    <button id="hideBtn"></button>	
</div>    

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM