uploadifyファイルアップロードプラグインの使い方の紹介
12958 ワード
uploadifyは強力なファイルアップロードプラグインであり、jqueryに基づいて実現される.公式サイトはwww.uploadify.comは2つのバージョンがあり、今回は無料版で、有料版は5ドルかかります.有料版の機能はもっと強くて、X壁をひっくり返すことができる友达はX壁をひっくり返すことでそのウェブサイトのDEMOのプレゼンテーションを見ることができます.
すべてのプラグインはすでに添付ファイルの中に置いて、甚だしきに至ってはその公式サイトさえアクセスできない友达がソースコードをダウンロードできないようにして、体積の小さいのは簡単な漢化のバージョンをしました.
使用方法は次のとおりです.
まず表示位置を指定します
そして初期化し、jsファイルを導入することを忘れないでください.
注意:
デフォルトのcssスタイルでは、
すべてのプラグインはすでに添付ファイルの中に置いて、甚だしきに至ってはその公式サイトさえアクセスできない友达がソースコードをダウンロードできないようにして、体積の小さいのは簡単な漢化のバージョンをしました.
使用方法は次のとおりです.
まず表示位置を指定します
<div id="fileQueue"></div>
<input type="file" name="uploadify" id="uploadify" />
<p>
<a href="javascript:$('#uploadify').uploadify('upload','*')"> </a>|
<a href="javascript:$('#uploadify').uploadify('cancel','*’)"> </a>
</p>
そして初期化し、jsファイルを導入することを忘れないでください.
/**
www.uploadify.com
，
**/
$(document).ready(function(){
$("#uploadify").uploadify({
'buttonText':' ', // ， 'SELECT FILES'
'buttonClass' : '', // ,
'buttonCursor' : 'hand', // ， 'hand' 'arrow'， 'hand'
'buttonImage' : null, // , buttonClass ( )
'checkExisting' : false, // , , false
'debug' : false, // DEBUG ， false
'fileObjName' : 'the_files', // ， MultipartHttpServletRequest.getFile(name) ( spring mvc, , InputStream )
'fileSizeLimit' : '100MB', // ， KB。 ， 200B,300KB,400MB,500GB
'fileTypeDesc' :'', //The description of the selectable files. This string appears in the browse files dialog box in the file type drop down.
'fileTypeExts' : '*.gif; *.jpg; *.png',// ，
'formData' : {'someKey' : 'someValue', 'someOtherKey' : 1},// ， “onUploadStart“
'height':30,
'method' : 'post', // , 'post' 'get', 'post'
'multi' : false, // , true false, false
'overrideEvents' : [], // , . ['onUploadProgress','onCancel'], []
'preventCaching':false, // true false. true, URL , . URL ( )
'progressData' : 'speed', // .speed ,percentage . percentage
'queueID' : 'fileQueue', // ID, false ID, false
'queueSizeLimit':999, // , 999. , 'uploadLimit'
'removeCompleted':false, // , true false
'removeTimeout' : 10, // , ( ) .
'requeueErrors' : true, // , . true false, false
'successTimeout': 10, // , ( ). ,
'swf': '${ctx}/js/uploadify-v3.1/uploadify.swf',//swf , , .
'uploader': 'fileUpload.do?action=upload',// URL.
'uploadLimit' : 999, // , 999
'width' :100, // , 'px'
'auto': false, // , true false
'onCancel':function(file){ // ,
alert(' '+file.name+' ');
},
'onClearQueue':function(queueItemCount){// 'cancel' * , .queueItemCount
alert(queueItemCount+' ');
},
'onDestroy':function(){ // destroy , . <a href="javascript:$('#file_upload').uploadify('destroy')">Destroy Uploadif</a>
alert('I am getting destroyed!');
},
'onDialogClose':function(queueData){// , ' ' ' ' . 'overrideEvents' , ,
//queueData.filesSelected
//queueData.filesQueued ( )
//queueData.filesReplaced ,
//queueData.filesCancelled The number of files that were cancelled from being added to the queue
//queueData.filesErrored
},
'onDialogOpen':function(){// , .<div id="message_box"></div>
$('#message_box').html('The file dialog box was opened...');
},
'onDisable':function(){// 'desable' , .<a href="javascript:$('#file_upload').uploadify('disable', true);">Disable Uploadify</a>
alert('You have disabled Uploadify!');
},
'onEnable':function(){// 'desable' , .<a href="javascript:$('#file_upload').uploadify('disable', false);">Enable Uploadify</a>
alert('You have enabled Uploadify!');
},
'onFallback':function(){//Triggered during initialization if a compatible version of Flash is not detected in the browser.
alert('Flash was not detected.');
},
'onInit' : function(instance) {// uploadify ，
//$("#uploadify").uploadify("settings", "width", 100);
$("#uploadify").uploadify("settings", "buttonText", " settings ");
alert('The queue ID is ' + instance.settings.queueID);
},
'onQueueComplete':function(queueData){// ,
//queueData.uploadsSuccessful
//queueData.uploadsErrored
},
'onSelect': function(file){//
alert('The file ' + file.name + ' was added to the queue.');
},
'onSelectError' : function(file,errorCode,errorMsg) {
//errorCode QUEUE_LIMIT_EXCEEDED ( , )
//errorCode FILE_EXCEEDS_SIZE_LIMIT
//errorCode ZERO_BYTE_FILE
//errorCode INVALID_FILETYPE
//errorMsg *You can access a full error message using ‘this.queueData.errorMsg’ if you do not override the default event handler.
alert('The file ' + file.name + ' returned an error and was not added to the queue.');
},
'onSWFReady' : function() {// flash ,
alert('The Flash file is ready to go.');
},
'onUploadComplete' : function(file) {// ,
alert('The file ' + file.name + ' finished processing.');
},
'onUploadError' : function(file, errorCode, errorMsg, errorString) {//
alert('The file ' + file.name + ' could not be uploaded: ' + errorString);
},
'onUploadSuccess' : function(file, data, response) {//
//data The data that was returned by the server-side script (anything that was echoed by the file)
//response The response returned by the server—true on success or false if no response. If false is returned, after the successTimeout option expires, a response of true is assumed.
alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);
},
'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {//Triggered each time the progress of a file upload is updated.
//bytesUploaded The number of bytes of the file that have been uploaded
//bytesTotal The total number of bytes of the file
//totalBytesUploaded The total number of bytes uploaded in the current upload operation (all files)
//totalBytesTotal The total number of bytes to be uploaded (all files)
$('#progress').html(totalBytesUploaded + ' bytes uploaded of ' + totalBytesTotal + ' bytes.');//<div id="progress"></div>
},
'onUploadStart' : function(file) {//
$("#uploadify").uploadify("settings", "formData", {'someKey':'3333','kkk':'llll'});
alert(' ' + file.name);
}
/**
'cancel':
fileID ID. ID ID ( id attribute of the file queue item), . '*' , ID,
suppressEvent true, onUploadCancel .
:
<a href="javascript:$('#file_upload').uploadify('cancel')">Cancel First File</a>
<a href="javascript:$('#file_upload').uploadify('cancel', '*')">Clear the Queue</a>
'destroy': uploadify
:
<a href="javascript:$('#file_upload').uploadify('destroy')">Destroy Uploadify</a>
'disable': ' '
setDisabled true, false
:
<a href="javascript:$('#file_upload').uploadify('disable', true)">Disable the Button</a>
<a href="javascript:$('#file_upload').uploadify('disable', false)">Enable the Button</a>
'settings': uploadify settings
name , 'name'， name
value name
resetObjects true, postData , false, .
:
'swf'
:
<a href="javascript:changeBtnText()">Change the Button Text</a>
<a href="javascript:returnBtnText();">Read the Button</a>
function changeBtnText() {
$('#file_upload').uploadify('settings','buttonText','BROWSE');
}
function returnBtnText() {
alert('The button says ' + $('#file_upload').uploadify('settings','buttonText'));
}
'stop':
:
<a href="javascript:$('#file_upload').uploadify('upload', '*')">Upload the Files</a>
<a href="javascript:$('#file_upload').uploadify('stop')">Stop the Uploads!</a>
'upload':
fileID ID. ID ID ( id attribute of the file queue item), . '*',
:
<a href="javascript:$('#file_upload').uploadify('upload','*')">Upload Files</a>
**/
});
});
注意:
デフォルトのcssスタイルでは、
.uploadify-queue-item .cancel a {
background: url('/xticfc/js/uploadify-v3.1/uploadify-cancel.png') 0 0 no-repeat;
float: right;
height: 16px;
text-indent: -9999px;
width: 16px;
}