jQuery File Upload Does Not Display Preview

问题:

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

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 add callback is being called and that the uploadTemplate function is being called and returning expected values -- for some reason those values are simply not being appended to the presentation table.

$('#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/2012 I added the following to the initialization of fileupload:

  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

回答1:

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

回答2:

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

回答3:

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

According to the README, one of the optional requirements is

JavaScript Load Image function

回答4:

My Problem

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

Partialy Fixed

I found that bootstrap.js was 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.js from jquery plugin did not fix the problem btw)

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.js from the header file fully fixed my problem. The preview were showing both in IE and Firefox when image added without page fresh needed.

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

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.