ajaxfileupload使用中的一些问题

开发者福利!热门AI工具限时免费用 购周边即赠Coding Plan Lite,Claude Code、Cursor等20+工具畅享,效率翻倍! 阅读详情

项目以前是按照微信开发的,前端input上传图片功能用的是微信JS,在手机浏览器中无法正常上传图片,所以准备改用ajaxfileupload。在网上查找资料,大部分的ajaxfileupload原文件都不一样,质量参差不齐,有各种各样的错误,向大家推荐一个修改过没有错误的版本,供大家下载ajaxfileupload.js
以下是我在使用过程遇到的一些问题,供大家参考:

一、后台接收不到数据:

  1. input标签中没有name属性
  2. 只能传递图片数据,不能传递data,这是原文件中ajaxFileUpload方法中没有data,换成上面的版本就可以了
  3. 如果type是json格式,data中向后台传递数据也要是json格式

二、不管返回正确或者错误,一直进入error回调函数

  1. 如果type是json格式,后台返回数据也要是json格式,保持一致
  2. 在ajaxfileupload原文件中找到uploadHttpData方法,在json方式中按照以下修改
    if ( type == "json" )
    {
    //处理会加pre标签
    if(data.indexOf('<pre>') != -1) {
    data = data.substring(5, data.length-6);
    }
    //处理会加audio标签
    if(data.indexOf('<audio') != -1) {
    data = data.substring(0, data.indexOf('<audio'));
    }
    //改变原来的转换json逻辑
    data = jQuery.parseJSON(data);
    }

三、input标签只能选择一次

  1. 在createUploadForm方法中,按照以下修改
    var oldElement = $('#' + fileElementId);
    var newElement = $(oldElement).clone(true);
ajaxfileupload.js ajaxfileupload.js可以兼容IE8以下版本实现无刷新的Form提交,上传文件。 这个版本修改了提交后台失败的几个bug 使用是需注意以下几点: 1.调用createUploadForm,此方法中增加了change参数,此参数用户给新生成的input-file元素绑定change事件,如果不需要可以不加此参数。 2.要上传的input-file元素,建议放id和name属性,而且这两个属性值要保持一致 3.后台代码中,response里的contenttype要设置为"text/html",前台的success回调中对返回值作处理 例子如下: js: $.ajaxFileUpload({ url: url, type: 'post', data: data, secureuri: false, fileElementId: fileId, // input-file的id、name属性名 dataType: 'JSON', beforeSend: function (XMLHttpRequest) { //show loading... }, success: function (data, status) { data = jQuery.parseJSON(data); success(data); }, error: function (data, status, e) { error(e); }, complete: function (XMLHttpRequest, textStatus) { //hide loading... }, change: change //需要绑定到动态生成的input-file元素上的change事件处理方法;没有的话,这个参数可以不写 }); 如果加了change,change方法中需要处理一下,因为发现会被调2次 function Upload(event) { var fileid = $(event.target).attr('id'); if(isNullOrEmpty(fileid) || /^jUploadFile\d+$/.test(fileid))return; //注意:此处过滤无效调用 //... } 后台代码(ashx): public void ProcessRequest(HttpContext context) { try { context.Response.ContentType = "text/html"; var request = context.Request; var param1 = request.Params["param1"]; //取参数 //取上传文件 if (request.Files == null || request.Files.Count <= 0) throw new ApplicationException("no file to be uploaded!"); var file = request.Files[0]; var filename = System.IO.Path.GetFileName(file.FileName); var serverpath = Path.Combine(context.Server.MapPath(ROOT), filename); file.SaveAs(serverpath); //自定义返回Json字符串 var json = '{' + string.Format(json, id, finfo.Name, extension, path) + '}'; response.Write(json); return; } 立即下载

相关推荐

为jquery的ajaxfileupload增加附加参数的方法

直接说方法: 代码如下:$.ajaxFileUpload({data:{“a”:123,”b”:456};//附加参数,json格式});然后在ajaxFileUpload.js文件中修改两个函数,其实就是一个函数(给函数添加新的参数) 第一处: 代码如下:createUploadForm: function(id, fileElementId,data){}大于在26行吧。 然后在在函数体中加入以下代码: 代码如下:if (data) {      for (var i in data) {          $(‘<input type=”hidden” name=”‘ + i + ‘”

解决ajaxfileupload上传文件在IE浏览器返回data为空问题

关于ajaxfileupload,建议还是别用,已经没有人维护的脚本了,笔者就是入了这个坑。 在IE浏览器中ajaxfileupload返回data为空 jq.ajaxFileUpload ( { url: BatchInvoiceUrls.UploadExcelUrl,...

dbc68367的博客 556

手把手教你搭建一个属于自己的网站-适合零基础小白,文末附网站模板

手把手教你搭建一个属于自己的网站-适合零基础小白写在前面搭建需求功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 写在前面 前段时间休息想着搭一个属于自己的网站,几经尝试终于成功了,网上其实有很多教程,但很多,希望这篇文章能够帮助到

qq_46788925的博客 1万+

ajaxFileUpload使用和参数说明

前面有提到使用ajaxFileUpload的例子,这里再来谈一下ajaxFileUpload使用规范 ajaxFileUpload.js下载地址http://download.csdn.net/download/qq_25956141/10192286 ------------------ 参数规范: 传递类型为json类型的参数 1、url            上传处理程序地址。  

qq_25956141的博客 6402

ajaxFileUpload无法上传data传参的问题

今天遇到了一个问题:用插件ajaxFileUpload上传图片并在data中传参数时,后台怎么都不能接收到值,而且前台Js报错,都走不到后台的情况。一、代码如下$('#saveBtn').click(function () { //ajaxFileUpload不能传data,需要修改ajaxFileUpload。js代码    var ajaxData=JSON.stringify(upload...

wittdong的博客 5524

ajaxfileupload带参数上传文件

$.ajaxFileUpload( { url: '/controller/action', secureuri: false, data: { 'name': 'Tom', //'参数名称':'参数值' }, ... ... }

代码笔记 1551

ajax上传文件之ajaxfileupload使用详解

废话不多说,直接展示关键代码片段 HTML部分:<div class="form-group"> <label class="col-sm-2 control-label">图片:</label> <input name="WxQRCode" type="file" onchange="fileUpload('WxQRCode');" id="WxQRCode"> <inp

这是我的一个秘密,再简单不过的秘密:一个人只有用心去看,才能看到真实。 4883

解决 IE下ajaxfileupload不兼容的问题

ajaxfileupload文件上传兼容ie浏览器

技术改变生活 1万+

ajaxfileupload跨域问题解决

一、问题 在现实场景中,会有很多小伙伴采用ajaxfileupload这个控件取异步上传文件,它的原理是在源码中构造一个iframe上传,如果上传组件本身就在一个iframe中,上传文件的时候,ajaxfileupload源码中又构造一个iframe,这样上传的时候就会触发浏览器的同源策略,造成跨域,就算两个iframe本身处于同一个域名下,也会存在跨域,那么怎么解决呢? 二、解决方法 采用FormData上传即可解决!!!! 1、jsp页面代码: <input id="file" type

DJYDFT2831djydft的专栏 855

ajaxfileupload IE兼容问题

ajaxfileupload IE由于安全问题无法使用该插件。 解决办法: 触发$.ajaxFileUpload();方法的事件必须在标签内。

rasarayuyu的专栏 443

AjaxFileUpload问题

在做ajaxFileUpload时,我也遇到这个问题,同时还有其它的问题,用了一下午的时间解决了: 问题1:如楼主所说,jQuery.handleError is not a function 原因是,经测试handlerError只在jquery-1.4.2之前的版本中存在,jquery-1.6 和1.7中都没有这个函数了,因此在1.4.2中将这个函数复制到了ajaxFileUpload.js中,

Tiglle的博客 528

AjaxFileUpload 项目常见问题解决方案

AjaxFileUpload 项目常见问题解决方案 1. 项目基础介绍和主要编程语言 AjaxFileUpload 是一个开源项目,它基于原始的 AjaxFileUpload 插件进行了改进和修复。该项目主要解决了原始插件中的一些问题,并添加了额外的功能,如支持发送附加参数和数据类型检查。它使用的主要编程语言是 JavaScript。 2. 新手常见问题及解决步骤 问题一:如何发送附加参数? 问题...

gitblog_00247的博客 479

ajaxfileupload 返回值_Ajaxfileupload 上传文件后返回response的contentType错误问题

使用ajaxFileupload上传文件,将文件内容以json方式返回显示到浏览器。问题:返回的文件内容较小时正常,但当返回的json数据大概大于10K后,返回到浏览器后弹出保存文件对话框,无法正常显示。经过测试,如果去掉上传文件功能,可以正常返回300K的json数据。struts2设置response contentType 为text/html。另外设置为text/plain、applica...

weixin_39557087的博客 540

php $.ajaxfileupload,ajaxfileupload上传时出现的问题详解

1.ajaxfileupload 上传时会出现如下问题:2. 网上有很多的解决办法,在这里,我又发现了一种,可能你的错误会是这个原因引起的------原因是 : 你在一般处理程序中没有返回前台需要的数据格式字符串3.下面给出一个例子:前台:.fileLink{position: relative;display: inline-block;background: #fff;border: 1px ...

weixin_39612896的博客 355

JQuery ajaxFileUpload.js上传文件的使用问题

使用在框架使用jq的情况下,使用ajaxFileUpload上传文件是一个不错的选择,ajaxFileUpload支持异步上传,采用的是隐藏的表单提交,避免了直接使用表单提交文件带来的问题,由于ajaxFileUpload依赖的jq版本较老,在jq_1.2.x之前了,所以用高版本的jq会报错,网上改写了ajaxFileUpload部分代码,以适配高低版本的jq,而且支持data来传另外的参数(之前...

lucky_ly的博客 1270

ajaxfileupload上传文件问题

一、ajaxfileupload在新版的jQuery中会报jQuery.handleError is not a function 解决办法: 在Ajaxfileupload.js中追加方法: handleError: function (s, xhr, status, e) { if (s.error) { s.error.call(s.context || s,...

闫先生的博客 366

ajaxfileuploadajaxfileupload 上传时会出现连接重置的问题

1.ajaxfileupload 上传时会出现如下问题: 2. 网上有很多的解决办法,在这里,我又遇到了一种,可能你的错误会是这个原因引起的 ------原因是 : 你在一般处理程序中没有返回前台需要的数据格式字符串 3.下面给出一个例子: 1 前台: 2 <style type="text/css"> 3 ...

dhny25701的博客 186

上传文件中使用ajaxfileupload.js碰到的问题

在做上传图片时需要用到异步上传值服务器,当时选用了ajax的ajaxfileupload可以上传。 这里写下踩过的坑 1:使用.ajaxFileUpload();函数,网页报错,提示没有这个函数。解决:导入ajaxfileupload.js文件。简单2:上传成功了没有执行回调,即.ajaxFileUpload({});函数,网页报错,提示没有这个函数。 解决:导入ajaxfileup

hmy_362322的博客 4518

ajaxFileUpload遇到的问题

在做ajaxFileUpload时,我也遇到这个问题,同时还有其它的问题,用了一下午的时间解决了: 问题1:如楼主所说,jQuery.handleError is not a function 原因是,经测试handlerError只在jquery-1.4.2之前的版本中存在,jquery-1.6 和1.7中都没有这个函数了,因此在1.4.2中将这个函数复制到了ajaxFileUpload.js中

lixld的专栏 793
上一篇: python-flask模板应用中遇见的问题(二):Jinja2中转义html
下一篇: python-库安装过程中遇见的问题
leiiiii
博客等级 码龄15年 3粉丝 4原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值