最近在写项目时第一次接触swfupload上传控件,此控件上传方便 ,支持无刷新上传,并且支持多文件上传。
现在我还只用到过单文件上传,我先贴上单文件上传的,多文件上传后面再更新。
使用swfupload控件时需要引入几个文件,此包可以直接上swfupload官网上下载 http://code.google.com/p/swfupload/
<script type="text/javascript" src="./static/cmsAdminStatic/js/coin-slider.min.js"></script>
<script type="text/javascript" src="./static/cmsAdminStatic/SWFUpload/swfupload.js"></script>
<script type="text/javascript" src="./static/cmsAdminStatic/SWFUpload/swfupload.queue.js"></script>
<script type="text/javascript" src="./static/cmsAdminStatic/SWFUpload/fileprogress.js"></script>
<script type="text/javascript" src="./static/cmsAdminStatic/SWFUpload/handlers.js"></script>
初始化后相当于就是在span id="uploadbtn1" 处显示上传按钮
html:
</span><span id="uploadbtn1"></span>
(1 MB max)
js:
var swfu;
window.onload = function () {
swfu = new SWFUpload({
// Backend settings
upload_url: "/uploadSlidesFile",
//file_post_name: "file",
post_params: {Filename : $("#filename").val()},
// Flash file settings
file_size_limit : "1MB",
file_types : "*.jpg;*.jpeg;*.png;", //文件类型 // or you could use something like: "*.doc;*.wpd;*.pdf",
file_types_description : "All Files",
file_upload_limit : "10",
file_queue_limit : "10",
/*
// Event handler settings
swfupload_loaded_handler : swfUploadLoaded,
file_dialog_start_handler: fileDialogStart,
file_queued_handler : fileQueued,
file_queue_error_handler : fileQueueError,
file_dialog_complete_handler : fileDialogComplete,
//upload_start_handler : uploadStart, // I could do some client/JavaScript validation here, but I don't need to.
upload_progress_handler : uploadProgress,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccess,
upload_complete_handler : uploadComplete,
*/
file_dialog_start_handler : function(){},
file_queued_handler : function(file){
// alert(file.name);
// $("#filename").val(file.name);
},
file_queue_error_handler : function (file, errorCode, message) {
if(errorCode==SWFUpload.QUEUE_ERROR.INVALID_FILETYPE){
alert("上传文件格式不符!");
}
if (errorCode==SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT){
alert("文件过大!");
}else{
alert("上传出错,请检查要上传的文件是否正确");
}
},
file_dialog_complete_handler : function(numFilesSelected, numFilesQueued){
this.startUpload();
},
upload_start_handler : function(){},
upload_progress_handler : function(){},
upload_error_handler : function(file, code, message){
alert("error:" + code + ";" + message);
},
upload_complete_handler : function(data){
//alert("upload complete:" + data);
},
upload_success_handler : function(file, serverData, response) {
// alert(serverData);
try {
//console.log(serverData);
//"{"code":"","data":{"path":"/appReleaseFile/c7d2cb6c3b7c49fbb1e3796162101df2.zip","dir":"/appReleaseFile/","fileId":"3b42c8ab710a4aad90f07787f81094bc"},"exception":"","message":"上传文件成功","result":1,"success":true}"
//服务端返回json外面有"", 需要通过eval解析
var data = eval("("+serverData+")");
// alert(data.data.path);
if('true'==data.success || true==data.success){
alert('上传文件成功!');
$("#slidePicUrl").val(data.data.path);
$("#uploadFileName").html(data.data.name);
// $('#slidesImg').attr('src', data.data.path);
//$('.edit-app-thumb').prepend('<img id="slidesImg" class="app-thumb" alt="slidesImg" src="'+data.data.path+'" />');
// $('#picId').val(data.data.id);
}else{
alert('上传文件失败!');
}
} catch (ex) {
this.debug(ex);
}
},
// Button Settings
button_image_url : "./static/cmsAdminStatic/SWFUpload/XPButtonUploadText_61x22.png", //上传图标
button_placeholder_id : "uploadbtn1",
button_width: 61,
button_height: 22,
//button_text: '请选择上传文件',
button_text:'',
// Flash Settings
flash_url : "./static/cmsAdminStatic/SWFUpload/swfupload.swf",
custom_settings : {
progress_target : "fsUploadProgress",
upload_successful : false
},
// Debug settings
debug: false //debug 测试
});
};