ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

SWFUpload 兼容h5 上传图片

2021-11-05 15:33:57  阅读:166  来源: 互联网

标签:function prototype settings SWFUpload 兼容 H5Upload var 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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有