查看readme中的说明,

注释掉这个js的引用

<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<!--<script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>-->

然后发现错误在loadImage.parseMetaData,提示loadImage undefined

loadImageMetaData: function (data, options) {
if (options.disabled) {
return data;
}
var that = this,
dfd = $.Deferred();
loadImage.parseMetaData(data.files[data.index], function (result) {
$.extend(data, result);
dfd.resolveWith(that, [data]);
}, options);
return dfd.promise();
},

在loadImageMetaData函数前面,加上console.trace(); 刷新页面,再次尝试,然后查看stack trace,但是这个结果没有意义。可读性太差了。

使用stacktrace.js查看堆栈信息

引用https://cdnjs.cloudflare.com/ajax/libs/stacktrace.js/2.0.0/stacktrace.js,然后在loadImageMetaData函数处,输出堆栈信息

 var callback = function(stackframes) {
var stringifiedStack = stackframes.map(function(sf) {
return sf.toString();
}).join('\n');
console.log(stringifiedStack);
}; var errback = function(err) { console.log(err.message); }; StackTrace.get().then(callback).catch(errback);

loadImageMetaData()@http://172.31.212.20:8082/jQuery-File-Upload-Demo/js/jquery.fileupload-image.js:289:28

func()@http://172.31.212.20:8082/jQuery-File-Upload-Demo/js/jquery.fileupload-process.js:84:65

_processFile: function (data, originalData) {
var that = this,
dfd = $.Deferred().resolveWith(that, [data]),
chain = dfd.promise();
this._trigger('process', null, data);
$.each(data.processQueue, function (i, settings) {
var func = function (data) {
if (originalData.errorThrown) {
return $.Deferred()
.rejectWith(that, [originalData]).promise();
}
return that.processActions[settings.action].call(
that,
data,
settings
);
};
chain = chain.then(func, settings.always && func);
});
chain
.done(function () {
that._trigger('processdone', null, data);
that._trigger('processalways', null, data);
})
.fail(function () {
that._trigger('processfail', null, data);
that._trigger('processalways', null, data);
});
return chain;
},

function()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:3305:32

apply()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:3148:29

add()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:3194:6

function()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:3304:28

callback.apply()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:384:22

jQuery.each()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:3301:13

promise.promise()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:3361:8

jQuery.Deferred(function()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:3300:19

_processFile/<()@http://172.31.212.20:8082/jQuery-File-Upload-Demo/js/jquery.fileupload-process.js:90:31

   chain = chain.then(func, settings.always && func);

callback.apply()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:384:22

_processFile()@http://172.31.212.20:8082/jQuery-File-Upload-Demo/js/jquery.fileupload-process.js:78:15

$.each(data.processQueue, function (i, settings) {

$.widget/</proxiedPrototype[prop]</<()@http://172.31.212.20:8082/jQuery-File-Upload-Demo/js/vendor/jquery.ui.widget.js:127:25

returnValue = value.apply( this, arguments );

func()@http://172.31.212.20:8082/jQuery-File-Upload-Demo/js/jquery.fileupload-process.js:153:41

return that._processFile(opts, data);

function()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:3305:32

apply()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:3148:29

add()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:3194:6

function()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:3304:28

callback.apply()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:384:22

jQuery.each()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:3301:13

promise.promise()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:3361:8

jQuery.Deferred(function()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:3300:19

process/<()@http://172.31.212.20:8082/jQuery-File-Upload-Demo/js/jquery.fileupload-process.js:157:67

that._processingQueue = that._processingQueue.then(func, func)

callback.apply()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:384:22

process()@http://172.31.212.20:8082/jQuery-File-Upload-Demo/js/jquery.fileupload-process.js:146:19

$.each(data.files, function (index) {

$.widget/</proxiedPrototype[prop]</<()@http://172.31.212.20:8082/jQuery-File-Upload-Demo/js/vendor/jquery.ui.widget.js:127:25

returnValue = value.apply( this, arguments );

$.widget.bridge/$.fn[name]/<()@http://172.31.212.20:8082/jQuery-File-Upload-Demo/js/vendor/jquery.ui.widget.js:220:39

methodValue = instance[ options ].apply( instance, args );

callback.apply()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:384:22

each()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:136:16

$.widget.bridge/$.fn[name]()@http://172.31.212.20:8082/jQuery-File-Upload-Demo/js/vendor/jquery.ui.widget.js:206:9

this.each(function() {

add/<()@http://172.31.212.20:8082/jQuery-File-Upload-Demo/js/jquery.fileupload-ui.js:115:34

return $this.fileupload('process', data);

function()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:3305:32

apply()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:3148:29

add()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:3194:6

function()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:3304:28

callback.apply()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:384:22

jQuery.each()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:3301:13

promise.promise()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:3361:8

jQuery.Deferred(function()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:3300:19

_addConvenienceMethods/data.process()@http://172.31.212.20:8082/jQuery-File-Upload-Demo/js/jquery.fileupload.js:663:27

).then(resolveFunc, rejectFunc);

add()@http://172.31.212.20:8082/jQuery-File-Upload-Demo/js/jquery.fileupload-ui.js:114:22

data.process(function () {

_trigger()@http://172.31.212.20:8082/jQuery-File-Upload-Demo/js/vendor/jquery.ui.widget.js:527:13

callback.apply( this.element[0], [ event ].concat( data ) ) === false ||
event.isDefaultPrevented() );

_onAdd/<()@http://172.31.212.20:8082/jQuery-File-Upload-Demo/js/jquery.fileupload.js:1037:31

result = that._trigger(
'add',
$.Event('add', {delegatedEvent: e}),
newData
);

callback.apply()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:384:22

_onAdd()@http://172.31.212.20:8082/jQuery-File-Upload-Demo/js/jquery.fileupload.js:1030:15

$.each(fileSet || files, function (index, element) {

$.widget/</proxiedPrototype[prop]</<()@http://172.31.212.20:8082/jQuery-File-Upload-Demo/js/vendor/jquery.ui.widget.js:127:25

returnValue = value.apply( this, arguments );

_onChange/<()@http://172.31.212.20:8082/jQuery-File-Upload-Demo/js/jquery.fileupload.js:1236:26

that._onAdd(e, data);

apply()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:3148:29

add()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:3194:6

always()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:3295:14

_onChange()@http://172.31.212.20:8082/jQuery-File-Upload-Demo/js/jquery.fileupload.js:1226:53

this._getFileInputFiles(data.fileInput).always(function (files) {

$.widget/</proxiedPrototype[prop]</<()@http://172.31.212.20:8082/jQuery-File-Upload-Demo/js/vendor/jquery.ui.widget.js:127:25

handlerProxy()@http://172.31.212.20:8082/jQuery-File-Upload-Demo/js/vendor/jquery.ui.widget.js:438:7

return ( typeof handler === "string" ? instance[ handler ] : handler )
.apply( instance, arguments );

event.namespace_re.test()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:4670:8

handle()@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js:4338:27

查看jQuery file upload的image preview如何工作的的更多相关文章

  1. jQuery File Upload

    jQuery File Upload介绍.............................................. 2 实现基本原理......................... ...

  2. 定制jQuery File Upload为微博式单文件上传

    日志未经声明,均为AlloVince原创.版权采用『 知识共享署名-非商业性使用 2.5 许可协议』进行许可. jQuery File Upload是一个非常优秀的上传组件,主要使用了XHR作为上传方 ...

  3. jQuery File Upload 单页面多实例的实现

    jQuery File Upload 的 GitHub 地址:https://github.com/blueimp/jQuery-File-Upload 插件描述:jQuery File Upload ...

  4. 用jQuery File Upload做的上传控件demo,支持同页面多个上传按钮

    需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为 ...

  5. jQuery File Upload blueimp with struts2 简单试用

    Official Site的话随便搜索就可以去了 另外新版PHP似乎都有问题  虽然图片都可以上传  但是response报错  我下载的是8.8.7木有问题   但是8.8.7版本结合修改main. ...

  6. jQuery File Upload done函数没有返回

    最近在使用jQuery File Upload 上传图片时发现一个问题,发现done函数没有callback,经过一番折腾,找到问题原因,是由于dataType: ‘json’造成的,改为autoUp ...

  7. jquery file upload 文件上传插件

    1. jquery file upload 下载 jquery file upload Demo 地址:https://blueimp.github.io/jQuery-File-Upload/ jq ...

  8. jQuery File Upload跨域上传

    最近在做一个一手粮互联网项目,方案为前后端分离,自己负责前端框架,采用了Requirejs+avalonjs+jquery三个框架完成. 前后端通过跨域实现接口调用,中间也发现了不少问题,尤其是在富文 ...

  9. jquery ajax发送delete(use in jquery file upload delete file)

    环境: jQuery file upload HTML example code <div class="pic-preview"> <div class=&qu ...

随机推荐

  1. eclipse中经常用到的修改菜单项

    1.编写java程序时,书写一个类之后,要调用此类的某个方法时,点个点,此类的所有方法都会自动出现,然后再选择需要的那个方法即可: 2.鼠标放在一个类上面,关于此类的相关描述就会自动加载出来,要修改的 ...

  2. linux查找进程id和杀死进程以及查看内存??

    ps 命令用于查看当前正在运行的进程 ps ax : 显示当前系统进程的列表 ps aux : 显示当前系统进程详细列表以及进程用户 -e 显示所有进程,环境变量 此参数的效果和指定"A&q ...

  3. “程序包com.sun.tools.javac.util不存在” 问题解决

    最近工作中在编译打包项目的时候遇到了如标题所示的问题,报这个错误的类是 com.sun.tools.javac.util.Pair.问题很诡异,在Idea可以导入此类,项目启动运行也很正常,但就是在打 ...

  4. TMS320F28335——SPI使用笔记

    一.SPI硬件接口 GPIO54    -------    SPISIMOA GPIO55    -------    SPISOMIA GPIO56    -------    SPCLK GPI ...

  5. 剑指offer 删除链表的节点

    给定单向链表的头指针和一个节点指针,定义一个函数在O(1)时间内删除该节点. struct ListNode { int val; ListNode *next; }; void DeleteNode ...

  6. install stackless python on ubuntu

    前言 我准备用stackless模拟游戏玩家登陆/注册等行为,测试游戏服务器的性能. 但是在安装stackless的过程中遇到了很多问题,特此记录下来,也分享给需要的朋友. 关于stackless S ...

  7. java字符流读取文件

    package ba; import java.io.*; public class zifuTest { public static void main(String[] args) { FileI ...

  8. R语言 绘图——条形图可以将堆积条形图与百分比堆积条形图配合使用

    在使用堆积条形图时候,新增一个百分比堆积条形图,可以加深读者印象. 封装一个function函数后只需要在调用的数据上改一下pos=‘fill’的代码即可.比较方便. 案例: # 封装函数 fun1& ...

  9. 利用 TCMalloc 优化 Nginx 的性能

    TCMalloc 全称为 Thread-Caching Malloc,是谷歌的开源工具 google-perftools 的成员,它可以 在内存分配效率和速度上高很多,可以很大程度提高服务器在高并发情 ...

  10. 时钟管脚设置问题 xilinx ERROR:Place:864 - Incompatible IOB's are locked to the same bank 0

    ERROR:Place:1108 - A clock IOB / BUFGMUX clock component pair have been found   that are not placed ...