SWFUpload 兼容h5 上传图片

后端文件上传使用了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 [
'

',
'',
this.settings.button_text,
'',
'<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">',
''
].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，其它都不用改动。

标签：function,prototype,settings,SWFUpload,兼容,H5Upload,var,h5
来源： https://www.cnblogs.com/liu201312/p/15513550.html