【实战】替代Flash的，基于JQuery、HTML5文件上传插件

最新推荐文章于 2024-04-17 10:01:41 发布

雕技小虫

最新推荐文章于 2024-04-17 10:01:41 发布

阅读量2.2k

点赞数 2

分类专栏：云服务系统开发文章标签： jquery asp.net html5 upload flash

本文链接：https://blog.csdn.net/itisauto2008/article/details/114665657

版权

系统开发同时被 2 个专栏收录

50 篇文章 2 订阅

订阅专栏

云服务

21 篇文章 0 订阅

订阅专栏

替代Flash的文件上传插件

由于Flash已被Chorme、FireFox、IE等各大主流浏览器彻底废止，所以必须寻找替代原有基于Flash的文件上传插件的方案。

利用熟悉的JQuery、HTML5 的 XMLHttpRequest，可以实现替代原有基于Flash的文件上传插件。

经过搜集整理、测试修改，得到了可用的插件文件，简单可用，以解燃眉之急。

运行效果如下：

插件文件如下：

引用代码示例：

<html xmlns="http://www.w3.org/1999/xhtml">
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>文件上传插件</title> 
  <link rel="stylesheet" type="text/css" href="sunnyFileUploader.css" /> 
  <script type="text/javascript" src="jquery.js"></script> 
  <script type="text/javascript" src="jquery.sunnyFileUploader.js"></script> 
  <style type="text/css">

</style> 
  <script type="text/javascript">

$(function(){

	$('#upload').html5uploader({

		auto:true,

		multi:true,

		removeTimeout:9999999,

		url:'upload.aspx',
	});

</script> 
 </head> 
 <body> 
  <div id="upload"></div>  
 </body>
</html>

插件实现的关键代码：

var request = new XMLHttpRequest();
if (request.upload) {
    // 上传中
    request.upload.addEventListener("progress",
    function(e) {
        self.onProgress(file, e.loaded, e.total);
    },
    false);

    // 文件上传是否成功
    request.onreadystatechange = function(e) {
        if (request.readyState == 4) {
            if (request.status == 200) {
                self.onUploadSuccess(file, request.responseText);
                setTimeout(function() {
                    SUNNYFILE.onDelete(file.index);
                },
                option.removeTimeout);

                self.onUploadComplete();

            } else {
                self.onUploadError(file, request.responseText);
            }
        }
    };

    option.onUploadStart();
    
    //开始上传
    request.open("POST", "服务端接收文件URL地址", true);

    var formData = new FormData();
    formData.append("Filedata", file);
    //这里添加更多参数，例如上传路径等

    request.send(formData);

相关插件代码的下载地址

祝你好运

以上

雕技小虫

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【实战】替代Flash的，基于JQuery、HTML5文件上传插件

替代Flash的文件上传插件由于Flash已被Chorme、FireFox、IE等各大主流浏览器彻底废止，所以必须寻找替代原有基于Flash的文件上传插件的方案。利用熟悉的JQuery、HTML5 的 XMLHttpRequest，可以实现替代原有基于Flash的文件上传插件。经过搜集整理、测试修改，得到了可用的插件文件，简单可用，以解燃眉之急。运行效果如下：插件文件如下：引用代码示例：<html xmlns="http://www.w3.org/1999/xht
复制链接

扫一扫