SWFUpload一个强大的文件上传神器(学习二)实战
2021-04-01 16:28
标签:asc ash erro style 开发者 length ESS 文字 ade 这个是我们准备好的占位元素,swfupload实例化之后会被flash按钮替换 SWFUpload一个强大的文件上传神器(学习二)实战 标签:asc ash erro style 开发者 length ESS 文字 ade 原文地址:https://www.cnblogs.com/kunmomo/p/12567832.html1、引入swfupload.js
2、实例化swfupload对象,并传入参数配置对象
封装image.load.js
var ImageUpload = {
swfUpload: function (btn, addr) {
var $btn = $(btn).parent();
new SWFUpload({
flash_url: "/assets/ueditor/third-party/swfupload/swfupload.swf", // swfupload.swf文件的绝对或相对地址
upload_url: "/swfupload/img/upload4Type?type=1", // 处理上传文件的服务器端页面的url地址
file_size_limit: "10 MB", // 指定要上传的文件的最大体积
file_types: "*.*",// 指定了允许上传的文件类型,当有多个类型时使用分号隔开,比如:*.jpg;*.png ,允许所有类型时请使用 *.*
file_types_description: "All Files", // 指定在文件选取窗口中显示的文件类型描述,起一个提示和说明的作用吧
file_upload_limit: 100, // 上传文件了,也不能往上传队列里添加文件了。把该属性设为0时表示不限制文件的上传数量。
file_queue_limit: 0,
debug: false,
button_image_url: "/assets/ueditor/third-party/swfupload/images/XPButtonUploadText_61x22.png", // 指定Flash按钮的背景图片,相对地址或绝对地址都可以。
button_width: "61", // 指定Flash按钮的宽度
button_height: "22", // 指定Flash按钮的高度
button_placeholder: btn, // 指定一个dom元素,该dom元素在swfupload实例化后会被Flash按钮代替,这个dom元素相当于一个占位符。当button_placeholder_id与button_placeholder都存在时,以button_placeholder_id为优先
button_placeholder_id: "###invalidforfirefox###",
button_text: ‘‘, // 指定Flash按钮上的文字,也可以是html代码
button_text_style: ".theFont { font-size: 16; }",
button_text_left_padding: 12,
button_text_top_padding: 3,
file_dialog_complete_handler: fileDialogComplete, // 当文件选取完毕且选取的文件经过处理后(指添加到上传队列),会立即触发该事件。可以在该事件中调用this.startUpload()方法来实现文件的自动上传
upload_start_handler: uploadStart, // 当文件即将上传时会触发该事件
upload_error_handler: uploadError, // 文件上传被中断或是文件没有成功上传时会触发该事件
upload_success_handler: uploadSuccess, // 当一个文件上传成功后会触发该事件
upload_complete_handler: uploadComplete // 当一次文件上传的流程完成时(不管是成功的还是不成功的)会触发该事件,该事件表明本次上传已经完成,上传队列里的下一个文件可以开始上传了。该事件发生后队列中下一个文件的上传将会开始
});
function uploadSuccess(file, serverData) { // 参数file object为文件信息对象 参数server data为服务器端输出的数据
var json = decodeURI(serverData);
json = eval(‘(‘ + json + ‘)‘);
var code = json.code;
var msg = json.msg;
if (code == "0") {
alert(1111)
$(addr).val(json.map.url); // input框的值为服务器返回的地址
if ($btn.parent().find("img").length > 0) {
$btn.parent().find("img").attr("src", json.map.url); // 让图片链接下面的图片显示出来
}
} else {
alert(msg);
}
}
function fileQueued() {
}
function fileQueueError() {
}
function fileDialogComplete() {
this.startUpload();
}
function uploadStart() {
}
function uploadError() {
alert("upload error");
}
function uploadComplete() {
}
}
}
引入image.load.js
在主js里面调用ImageUpload.swfUpload来实例化SWFUpload对象
var FinishSuperEntrance = {
swfUpload: function (btn, addr) {
ImageUpload.swfUpload(btn, addr);
}
}
$(".upload-btn-img").each(function (i, e) {
var input = $(e).parents(".popup-item").prev().find("input").eq(1);
FinishSuperEntrance.swfUpload(e, input);
});
3、点击SWFUpload提供的Flash按钮,弹出文件选取窗口选择要上传的文件
4、文件选取完成后符合规定的文件会被添加到上传的队列里
5、调用startUpload方法让队列里文件开始上传
function fileDialogComplete() {
this.startUpload();
}
6、文件上传过程中会触发相应的事件,开发者利用这些事件来更新ui、处理错误、发出提示等等;