jquery 文件上传触发两次_jquery file upload使用过程中遇到的bug总结

冷不防 2023-01-10 05:17 154阅读 0赞

bug1: IE8,IE9点击上传无反应, 文件上传不了1

2

3

4

5

6

7

8

9

10

11

12

13var iframe = false;

if($.browser.msie && $.browser.version < 10)\{

iframe = true;

\}

uploadContainer.fileupload(\{

iframe: iframe,

maxFileSize: 1000000,

acceptFileTypes: /(\\.|\\/)(jpe?g|png)$/i,

done: function (e, data)\{

//success 返回

\}

\});

即低版本IE需要通过iframe上传

bug2: ajax iframe上传, IE8,9中会自动下载后端返回的json

需要后端将返回的头信息Content-Type:application/json;charset=utf-8改成Content-Type:text/html;charset=utf-8

前端调用fileupload需要加上dataType参数为’text’, 防止IE8,9中的返回值是undefined

同时前端需要用JSON.parse来将数据转换成json

1

2

3

4

5

6

7

8

9

10uploadContainer.fileupload(\{

dataType: 'text'

iframe: iframe,

maxFileSize: 1000000,

acceptFileTypes: /(\\.|\\/)(jpe?g|png)$/i,

done: function (e, data) \{

//success 返回

var result = JSON.parse(data.result);

\}

\});

自定义上传按钮

通过给自定义按钮添加点击事件, 然后触发文件类型的input(display:none)的点击事件来完成上传, 这是做自定义上传的一般做法

但是由于在IE8下, input\[type=”file”\]如果是隐藏状态, 那么用上述做法是无法将本地文件上传至服务器, 这可能是IE8出于安全方面的考虑导致的

解决办法: 让input\[type=”file”\]透明, 并且覆盖在自定义按钮上, 这样用户看到的是我们的自定义按钮, 实际点击的是file

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

上传本地图片

.upload-wrap \{

position: relative;

//按钮样式

\}

.file-upload \{

opacity: 0;

filter: alpha(opacity=0);

position: absolute;

top: 0;

right: 0;

cursor: pointer;

font-size: 70px;

\}

需要注意的是, IE8下原生的file是一个输入框和一个浏览按钮, 这样点击范围就只有浏览按钮的区域, 不够友好, 通过添加font-size: 70px来扩大按钮范围, 这样点击整个div范围都可弹出文件选择框.

发表评论取消回复

表情：

评论列表（有 0 条评论，154人围观）

还没有评论，来说两句吧...

相关阅读

相关如何使用 jQuery 异步上传文件？

问：我想用 jQuery 异步上传文件。 $(document).ready(function () \{ $(“\uploadbutton”).click(func

迷南。/ 2024年03月30日 11:33/ 0 赞/ 70 阅读

相关 jquery 文件上传触发两次_jquery file upload使用过程中遇到的bug总结

bug1: IE8,IE9点击上传无反应, 文件上传不了1 2 3 4 5 6 7 8 9 10 11 12 13var iframe = false;

冷不防/ 2023年01月10日 05:17/ 0 赞/ 155 阅读

相关 jquery File upload 的一个例子

1. jquery file upload 下载 [jQuery][] file upload Demo 地址：https://blueimp.github.io/jQu

叁歲伎倆/ 2022年06月17日 12:52/ 0 赞/ 173 阅读

相关 jQuery-File-Upload 的使用

Query-File-Upload是一个jquery下的ajax文件上传插件, 官网：http://blueimp.github.io/jQuery-File-Upl

曾经终败给现在/ 2022年06月17日 12:48/ 0 赞/ 137 阅读

相关 jQuery使用FormData上传文件

这段时间，一直练习在ASP.NET MVC程序中上传文件。静态，动态，单个或多文件上传。在网上有看到网友提及使用FormData来上传，Insus.NET觉得是一个

柔情只为你懂/ 2022年04月22日 14:50/ 0 赞/ 307 阅读

相关 Spring上传文件(upload files)

前端实现：可以使用iView组件，实现文件的选择与上传，话不多说，直接上代码(注意，action中的路径及后端接收的路径，name即@RequestParam，通过nam

以你之姓@/ 2022年04月10日 04:29/ 0 赞/ 219 阅读

相关 django文件——django + jquery-file-upload上传篇（一）-- 插件实现文件上传

django + jquery-file-upload 插件实现文件上传 1.model.py class Fujian(models.Model):

Bertha 。/ 2022年01月13日 05:05/ 0 赞/ 296 阅读

相关 Django处理文件上传File Uploads

HttpRequest.FILES 表单上传的文件对象存储在类字典对象request.FILES中，表单格式需为multipart/form-data <table>

梦里梦外;/ 2021年12月23日 01:49/ 0 赞/ 305 阅读

相关 Angular 使用 ng2-file-upload 上传文件遇到的问题

Angular 上传文件可参考[Angular2使用ng2-file-upload上传文件][Angular2_ng2-file-upload] 这里记录在开发过程中遇到的

快来打我*/ 2021年11月26日 10:02/ 0 赞/ 384 阅读

相关 jquery_file_upload in Rails(ajax实现多张图片上传)

在此，我们要实现的是http://blueimp.github.com/jQuery-File-Upload/上传功能和效果。 1.准备工作关键gem：carrierwa

Dear 丶/ 2021年10月20日 00:50/ 0 赞/ 271 阅读