javascript jQuery 文件上传不显示预览

jQuery File Upload Does Not Display Preview

提问by Ari

The jQuery File Uploadplugin does NOT currently display the selected file. Does anyone know how I can troubleshoot this issue?

在jQuery的文件上传插件不显示当前选中的文件。有谁知道我如何解决这个问题？

I've implemented 'custom' templates (see below); note I do not need to display previously uploaded material, hence there is no download template.

我已经实现了“自定义”模板（见下文）；注意我不需要显示以前上传的材料，因此没有下载模板。

I have already checked (via logging) that the addcallback is being called and that the uploadTemplatefunction is being called and returning expected values -- for some reason those values are simply not being appended to the presentation table.

我已经检查（通过日志记录）add正在调用回调以及正在调用该uploadTemplate函数并返回预期值——出于某种原因，这些值根本没有附加到演示文稿表中。

$('#fileupload').fileupload(
  acceptFileTypes: /(\.|\/)(gif)$/i
  uploadTemplateId: null
  downloadTemplateId: null
  uploadTemplate: (obj) ->
    rows = $()
    $.each(obj.files, (idx, file) ->
      temp = "<tr class='template-upload fade'><td class='preview'><span class='fade'></span></td><td class='name'></td>'<td class='size'></td>"
      if (file.error)
        temp += "<td class='error' colspan='2'></td>"
      else
        temp += "<td><div class='progress'><div class='bar' style='width:0%;'></div></div></td><td class='start'><button>Start</button></td>"
      temp += "<td class='cancel'><button>Cancel</button></td></tr>"
      row = $(temp)
      row.find('.name').text(file.name)
      row.find('.size').text(obj.formatFileSize(file.size))
      rows = rows.add(row)
      )
    return rows
  downloadTemplate: ->
    return $()
)

UPDATE 10/16/2012I added the following to the initialization of fileupload:

2012 年 10 月 16 日更新我在文件上传的初始化中添加了以下内容：

  process: [{action: 'load', fileTypes: /^image\/(gif|jpeg|png)$/, maxFileSize: 2000000}, {action: 'resize', maxWidth: 1920, maxHeight: 1200, minWidth: 800, minHeight: 600}, {action: 'save'}]

Which does initiate the attempt to load the image, but unfortunately, the attempt results in the following error. Does anyone know what is the cause and/or how to solve it?

这确实启动了加载图像的尝试，但不幸的是，该尝试导致以下错误。有谁知道是什么原因和/或如何解决它？

Uncaught TypeError: undefined (loadImage) is not a function jquery.fileupload-fp.js:87

Uncaught TypeError: undefined (loadImage) is not a function jquery.fileupload-fp.js:87

回答by Ari

The problem was the order in which the dependencies were loaded; Load Imageneeds to be loaded before the other core dependencies.

问题在于加载依赖项的顺序；Load Image需要在其他核心依赖项之前加载。

回答by Nerdroid

Loading the Dependencies in the correct order solved my problem

以正确的顺序加载依赖项解决了我的问题

• load-image/load-image.js
• load-image/load-image-ios.js
• load-image/load-image-orientation.js
• load-image/load-image-meta.js
• load-image/load-image-exif.js

• load-image/load-image-exif-map.js

  (or use the minified version)

• jquery.iframe-transport.js

• jquery.fileupload.js
• jquery.fileupload-process.js
• jquery.fileupload-image.js
• jquery.fileupload-audio.js
• jquery.fileupload-video.js
• jquery.fileupload-validate.js
• jquery.fileupload-ui.js tmpl.js
• canvas-to-blob.js

• 加载图像/加载图像.js
• 加载图像/加载图像-ios.js
• 加载图像/加载图像-orientation.js
• 加载图像/加载图像meta.js
• 加载图像/加载图像-exif.js

• 加载图像/加载图像exif-map.js

  （或使用缩小版）

• jquery.iframe-transport.js

• jquery.fileupload.js
• jquery.fileupload-process.js
• jquery.fileupload-image.js
• jquery.fileupload-audio.js
• jquery.fileupload-video.js
• jquery.fileupload-validate.js
• jquery.fileupload-ui.js tmpl.js
• 画布到blob.js

回答by Hammad Khan

My Problem

我的问题

It was working fine on mac but was not working in FireFox and IE on Windows

它在 mac 上运行良好，但在 Windows 上的 FireFox 和 IE 中不起作用

Partialy Fixed

部分固定

I found that bootstrap.jswas included twice in my case, one in the header file and a second time by jquery file upload plugin. Removing the one in header file fixed it to the extent that preview were showing on page refresh but they were still not being shown (removing bootstrap.jsfrom jquery plugin did not fix the problem btw)

我发现bootstrap.js在我的案例中包含两次，一次在头文件中，第二次由 jquery 文件上传插件包含。删除头文件中的一个将其修复到预览在页面刷新时显示但仍未显示的程度（bootstrap.js从 jquery 插件中删除并没有解决问题顺便说一句）

Fully Fixed

完全固定

Digged some more and tried to comment out .js files that could possibly be causing an issue (conflict). By removing typeahead.bundle.min.jsfrom the header file fully fixed my problem. The preview were showing both in IE and Firefox when image added without page fresh needed.

进一步挖掘并尝试注释掉可能导致问题（冲突）的 .js 文件。通过typeahead.bundle.min.js从头文件中删除完全解决了我的问题。添加图像时，在 IE 和 Firefox 中都显示预览，而无需刷新页面。

I also commented out jquery-ui.jsbtw which was not needed on the page anyways and found one more duplicate js file as well as part of cleanup process.

我还注释掉了jquery-ui.js页面上无论如何都不需要的顺便说一句，并发现了另一个重复的 js 文件以及清理过程的一部分。

Wrong Password

密码错误

If you are storing uploaded files in database, if the database credentials are wrong, it will show the upload process but will not see the preview. Fixing database credentials will fix the preview problem.

如果您将上传的文件存储在数据库中，如果数据库凭据错误，它将显示上传过程但不会看到预览。修复数据库凭据将修复预览问题。

回答by mccannf

Have you installed all the requirements listed for the JQuery File Upload?

您是否安装了为 JQuery 文件上传列出的所有要求？

According to the README, one of the optional requirements is

根据README，可选要求之一是

JavaScript Load Image function

JavaScript 加载图片功能