SWFUpload改造兼容H5上传
前些年团队做的一些官网，基于当时的一套.NET系统开发的，后端文件上传使用了SWFUpload这个组件，效果虽然不错，然随着时代发展，Flash已被各大浏览器厂商逐渐抛弃，先是默认关闭插件支持，后更是直接移除了shockwave插件。
早有同事提意改造一下那个后台，但是许久没动过那套代码了，算下来调用上传的地方也有几十处，要改造也不简单。
前两日抽空看了下调用逻辑，是在jquery上挂载了事件处理的流程，然后创建了SWFUpload实例再处理文件上传的。若要不大改后台的情况下兼容h5，就得从挂载jquery这个事件流程上动手脚。
文件名:swfupload.handlers.js
部分代码：
$.fn.InitSWFUpload = function (p) {
// ...
var swfu = new SWFUpload({
// ... 参数
});
}这里只要在实例化SWFUpload前判断一下浏览器是否支持动态创建上传表单，再分开创建SWF上传和H5上传，就可以不修改调用的地方直接达到预期效果。剩下的工作就是创建一个类似SWFUpload的H5上传就可以了。
var uploadClass = SWFUpload;
if (window.FormData) {
uploadClass = H5Upload;
}
var swfu = new uploadClass({
// ...
});h5upload.js
var H5Upload;
if (H5Upload == undefined) {
H5Upload = function (settings) {
this.initH5Upload(settings);
};
}
H5Upload.instances = {};
H5Upload.movieCount = 0;
H5Upload.version = "2.2.0 2009-03-25";
H5Upload.prototype.initH5Upload = function (settings) {
try {
this.customSettings = {}; // A container where developers can place their own settings associated with this instance.
this.settings = settings;
this.eventQueue = [];
this.movieName = "H5Upload_" + (H5Upload.movieCount++);
this.movieElement = null;
// Setup global control tracking
H5Upload.instances[this.movieName] = this;
// Load the settings. Load the Flash movie.
this.initSettings();
this.loadHtml();
} catch (ex) {
delete H5Upload.instances[this.movieName];
throw ex;
}
};
H5Upload.prototype.loadHtml = function () {
var targetElement, tempParent;
// Make sure an element with the ID we are going to use doesn't already exist
if (document.getElementById(this.movieName) !== null) {
throw "ID " + this.movieName + " is already in use. The Flash Object could not be added";
}
// Get the element where we will be placing the flash movie
targetElement = document.getElementById(this.settings.button_placeholder_id) || this.settings.button_placeholder;
if (targetElement == undefined) {
throw "Could not find the placeholder element: " + this.settings.button_placeholder_id;
}
// Append the container and load the flash
tempParent = document.createElement("div");
tempParent.innerHTML = this.getH5HTML(); // Using innerHTML is non-standard but the only sensible way to dynamically add Flash in IE (and maybe other browsers)
targetElement.parentNode.replaceChild(tempParent.firstChild, targetElement);
this.initFileElement();
// Fix IE Flash/Form bug
if (window[this.movieName] == undefined && this.fileElement) {
window[this.movieName] = this.fileElement;
}
}
H5Upload.prototype.getH5HTML = function () {
return [
'<div style="width:' + this.settings.button_width + 'px;height:' + this.settings.button_height + 'px;overflow:hidden;position:relative;">',
'<div style="width:' + this.settings.button_width + 'px;height:' + this.settings.button_height + 'px;line-height:' + this.settings.button_height + 'px;text-align:center;' + this.settings.button_text_style + 'background:url(' + this.settings.button_image_url + ') center center no-repeat #1199ff;">',
this.settings.button_text,
'</div>',
'<input type="file" id="' + this.movieName + '" ' + (this.customSettings.single ? '' :' multiple')+' accept="' + this.settings.file_types.replace(/;/g,',').replace(/\*/g,'') + '" style="position:absolute;left:0;top:0;opacity:0;height:' + this.settings.button_height + 'px">',
'</div>'
].join("");
}
H5Upload.prototype.initFileElement = function () {
var self = this;
if (this.fileElement == undefined) {
this.fileElement = $('#' + this.movieName);
this.fileElement.on('change', function (e) { self.onSelectFile(e) });
}
if (this.fileElement === null) {
throw "Could not find Upload element";
}
return this.fileElement;
}
H5Upload.prototype.onSelectFile = function (e) {
var files = this.fileElement[0].files;
if (files.length > 0) {
this.uploadNext(files, 0);
}
}
H5Upload.prototype.uploadNext = function (files, idx) {
var self = this
if (files.length > idx) {
this.uploadFile(files[idx], function () {
self.uploadNext(files, idx + 1);
})
} else {
this.queueEvent('upload_complete_handler', [files]);
}
}
H5Upload.prototype.uploadFile = function (file, uploadNext) {
var self=this
var options = {
url: this.settings.upload_url,
type: 'POST',
dataType: 'json',
success: function (json) {
if (json.status == 1) {
self.queueEvent('upload_success_handler', [file, json]);
uploadNext(true, json)
} else {
self.queueEvent('upload_error_handler', [file, 1, json.msg]);
uploadNext(false, json)
}
},
error: function (xhr) {
self.queueEvent('upload_error_handler', [file]);
uploadNext(false)
}
};
options.data = new FormData();
options.data.append('Filedata', file);
options.cache = false;
options.processData = false;
options.contentType = false;
options.xhr = function () { //用以显示上传进度
var xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
xhr.upload.addEventListener('progress', function (event) {
var percent = Math.floor(event.loaded / event.total * 100);
self.queueEvent('upload_progress_handler', [file, event.loaded]);
}, false);
}
return xhr;
};
$.ajax(options);
}
// 屏蔽flash方法调用
H5Upload.prototype.callFlash = function (functionName, argumentArray) {
console.log('call:' + functionName, argumentArray);
return {};
}
// 将未重写的方法从SWFUpload拿过来
for (var funcname in SWFUpload.prototype) {
if (!H5Upload.prototype[funcname]) {
H5Upload.prototype[funcname] = SWFUpload.prototype[funcname];
}
}思路就是创建一个file选择框替代flash组件，监听选择文件事件，并手动取出文件异步上传，实现了基本的单文件和多文件上传及进度显示和回调。至于更详细的功能，暂时没必要加了。
使用方法就是在原来引用swfupload的js文件的地方多加一行引用h5upload.js，其它都不用改动。
豫公网安备 41112102000155号