js ajaxfileupload.js上传报错的解决方法

2024-03-04 16:37:25

相信大家在工作中经常用到文件上传的操作，因为我是搞前端的，所以这里主要是介绍ajax在前端中的操作。代码我省略的比较多，直接拿js那里的

$.ajaxFileUpload({
   url:'www.coding/mobi/file/uploadSingleFile.html',//处理图片脚本
   secureuri :false,
   fileElementId :'image2',//file控件id。就是input type="file" id="image2"
   dataType : 'json',
   success : function (data, status){
    console.log(data);
   },
   error: function(data, status, e){
    alert(e);
   }
   })

按照教程，这样子上传的话是没有问题的，可是它一直有一个报错。报的是什么错有点忘了，不好意思，因为用完很久才记得补回这篇文章，但是要修改它的源码，那个错误就可以解决了

它源码的最后一段是这样子的

uploadHttpData: function( r, type ) {
 var data = !type;
 data = type == "xml" || data ? r.responseXML : r.responseText;
 // If the type is "script", eval it in global context
 if ( type == "script" )
  jQuery.globalEval( data );
 // Get the JavaScript object, if JSON is used.
 if ( type == "json" )
  eval( "data = " + data );
 // evaluate scripts within html
 if ( type == "html" )
  jQuery("<div>").html(data).evalScripts();
  //alert($('param', data).each(function(){alert($(this).attr('value'));}));
 return data;
 }

将这一段改为这样子

uploadHttpData: function( r, type ) {
 var data = !type;
 data = type == "xml" || data ? r.responseXML : r.responseText;
 // If the type is "script", eval it in global context
 if ( type == "script" )
  jQuery.globalEval( data );
 // Get the JavaScript object, if JSON is used.
 if ( type == "json" ){
  // 因为json数据会被<pre>标签包着，所以有问题，现在添加以下代码，
  // update by hzy
  var reg = /<pre.+?>(.+)<\/pre>/g;
  var result = data.match(reg);
  result = RegExp.$1;
  // update end
  data = $.parseJSON(result);
  // eval( "data = " + data );
 // evaluate scripts within html
 }
 if ( type == "html" )
  jQuery("<div>").html(data).evalScripts();
  //alert($('param', data).each(function(){alert($(this).attr('value'));}));
 return data;
 }

这样就可以正常使用了。

另一种情况：ajaxFileUpload 报这错jQuery.handleError is not a function

版本1.4.2之前的版本才有handlerError方法，例子里使用的Jquery是1.2的，解决方法：

为了能够继续使用ajaxfileupload上传我们的附件，只好将下面代码拷进我们的项目中的ajaxfileupload.js文件中

handleError: function( s, xhr, status, e )  {
  // If a local callback was specified, fire it
    if ( s.error ) {
     s.error.call( s.context || s, xhr, status, e );
    } 

    // Fire the global callback
    if ( s.global ) {
     (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
    }
 }

更多精彩内容请参考专题《ajax上传技术汇总》，《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。

以上就是面对ajaxupload.js上传报错问题的解决方法，希望能帮助大家解决困难，也希望大家继续关注我们更多精彩内容。

jQuery异步上传文件插件ajaxFileUpload详细介绍

一.ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数说明: 1.url 上传处理程序地址. 2,fileElementId 需要上传的文件域的ID,即<input type="file">的ID. 3,secureuri 是否启用安全提交,默认为false. 4,dataType 服务器返回的数据类型.可以为xml,sc
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法

本文实例讲述了ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法.分享给大家供大家参考.具体实现方法分析如下: 首先,AjaxFileUploader插件是一个基于jquery的插件,我们可以使用AjaxFileUploader插件来实现文件异步上传功能了,使用这款插件上传文件不要担心兼容性的问题,它的兼容性可以说兼容所有主流浏览器,下面来给大家介绍一个AjaxFileUploader+thinkphp实现文件上传的实例. ThinkPHP框架下用AjaxFileUpl
PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例

平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现ajaxFileUpload这个插件挺不错,所以就用这个插件来做异步上传文件的效果.网上也有很多对ajaxFileUpload插件的使用的文章,不过我发现没有PHP版,所以这次服务器那边的处理就使用PHP语言来处理. 一.详解ajaxFileUpload插件的语法参数原理:ajaxfileupload是通过监听iframe的onload方
jQuery插件ajaxFileUpload实现异步上传文件效果

ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数说明: 1.url 上传处理程序地址. 2,fileElementId 需要上传的文件域的ID,即<input type="file">的ID. 3,secureuri 是否启用安全提交,默认为false. 4,dataType 服务器返回的数据类型.可以为xml,scri
解决AjaxFileupload 上传时会出现连接重置的问题

1.ajaxfileupload 上传时会出现如下问题: 2. 网上有很多的解决办法,在这里,我又发现了一种,可能你的错误会是这个原因引起的 ------原因是 : 你在一般处理程序中没有返回前台需要的数据格式字符串 3.下面给出一个例子: 前台: <style type="text/css"> .fileLink{position: relative;display: inline-block;background: #fff;border: 1px solid #098
asp.net+ajaxfileupload.js 实现文件异步上传代码分享

由于代码很简单,这里就闲话不多说了,直接上代码,小伙伴们自己研读代码就明白了. 前台代码: 复制代码代码如下: /*修改头像*/ //上传 function _sc() { $(".ckfile").html("").css("color", "#535353"); $("#_userImgPath").val("");
jQuery插件AjaxFileUpload实现ajax文件上传

本文实例为大家分享了AjaxFileUpload实现文件上传的具体代码,供大家参考,具体内容如下 jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个demo演示怎么用AjaxFileUpload插件实现文件上传. 1.引入AjaxFileUpload插件相关的js 复制代码代码如下: <script type="text/javascript" src="<%=basePath%>resources/js/
jQuery插件ajaxfileupload.js实现上传文件

AjaxUpLoad.js的使用实现无刷新文件上传,如图 1.创建页面并编写HTML 上传文档: <div class="uploadFile"> <span id="doc"><input type="text" disabled="disabled" /></span> <input type="hidden" id="hidFileNam
js ajaxfileupload.js上传报错的解决方法

相信大家在工作中经常用到文件上传的操作,因为我是搞前端的,所以这里主要是介绍ajax在前端中的操作.代码我省略的比较多,直接拿js那里的 $.ajaxFileUpload({ url:'www.coding/mobi/file/uploadSingleFile.html',//处理图片脚本 secureuri :false, fileElementId :'image2',//file控件id.就是input type="file" id="image2" data
node.js缺少mysql模块运行报错的解决方法

发现问题在用node.js连接数据库,运行报错:cannot find module 'mysql: 然后在管理员和用户下分别用npm安装数据库但是都是失败: 解决方法按照错误日志应该是找不到文件夹,无法打开package.json这个文件,刚开始没有理解这个错误,最后我进入到project目录运行npm安装数据库成功: 在项目的modules下面也有这个模块了: 总结以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对
el-upload多选文件上传报错解决方案

在element-ui中,el-upload可以进行文件多选操作. 在多选文件上传时,会循环调用上传方法.在第一次循环时,文件可以正常上传,第二次开始就会在 progress事件中报错: 尝试上传2个文件,在这里打印progress事件的参数: 会发现在第二次循环的时候,事件获取不到file,所以接下来的操作无法正常进行.如果不处理这个问题的话,上传方法依然可以使用,只不过最终传上去的只是第一个文件. 本人目前还不知道是什么原因造成了这个结果.但是经过查找相关问题找到了解决办法: 在进行文件多选
详解Vue项目在其他电脑npm run dev运行报错的解决方法

一个 Vue 项目从一台电脑上传到 github 上之后,再另外一台电脑上 git clone .并使用 npm run dev 或 npm run start 发生以下报错的解决方法. 报错原因缺少 node_modules 里面的依赖.在项目目录下使用 npm install 然后再 npm run dev. 如果在这一步当中, npm install 执行的过程中,处于一直卡顿的状态.说明网络状况不佳.建议使用 cnpm 淘宝源. 淘宝源使用 cnpm -v 查看是否已经安装 cnpm
Typescript中使用引用路径别名报错的解决方法

在TS中引用路径别名提示找不到模块或者相应的声明 1.ts中使用路径别名报错在react中通常路径别名都是在webpack的webpack.config.js文件中配置的,但是在引入了ts之后,webpack中的路径别名引用失效了此时我们需要在跟src文件同级目录的tsconfig.json文件中添加配置: 注意要在compilerOptions中添加(webpack中的路径也需要配置) "compilerOptions": { "target": "e
spring cloud feign不支持@RequestBody+ RequestMethod.GET报错的解决方法

1.问题梳理: 异常:org.springframework.web.HttpRequestMethodNotSupportedException: Request method 'POST' not supported 很明显是最终feign执行http请求时把这个方法认定为POST,但feign client中又定义了RequestMethod.GET 或 @GetMapping,冲突导致报错那么为什么feign会认为这个方法是post呢? 源码追踪: 1.我们从feignClient注解
angularjs使用gulp-uglify压缩后执行报错的解决方法

问题出现原因是由于压缩之后变量变成了,e.s.t等,需要依赖注入的方法没有使用中括号注入,而在function的参数中直接使用,导致压缩之后无法识别需要依赖注入的模块.例如: var module= angular.module('homeApp', ['ui.router']); module.config(function ($sceProvider) { $sceProvider.enabled(false); }) 改为: var module= angular.module('home
Vue2.x中利用@font-size引入字体图标报错的解决方法

利用 vue-cli 搭建的项目平台利用stylus写的css样式有 css-loader 依赖包x 下图是 webpack.base.conf.js 关于字体文件的配置有人这里会有重复的字体文件的配置,删除一项即可出现的问题:引入字体图标出现问题 1.报错将字体引入的相对路径改成绝对路径相对路径绝对路径 2.不报错,但是出现的字体图标是小方框有警告信息: 小方块: 报错是因为重定向的问题出现上述问题的原因 ①没在用到的地方引入字体的样式文件 ②使用的是后缀名为 .styl 文
vue init webpack 建vue项目报错的解决方法

使用vue init webpack 创建vue项目时报如下错误: vue init webpack my-project C:\Users\computer\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init:60 let template = program.args[0] ^^^ SyntaxError: Block-scoped declarations (let, const, function, class) not yet s
layui数据表格 table.render 报错的解决方法

一.报错信息 Whitelabel Error Page This application has no explicit mapping for /error, so you are seeing this as a fallback. Wed Jan 23 15:20:18 CST 2019 There was an unexpected error (type=Internal Server Error, status=500). An error happened during temp

js ajaxfileupload.js上传报错的解决方法

相关推荐

随机推荐