Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The <a href="http://blueimp.github.com/jQuery-File-Upload/" rel="nofollow">jQuery File Upload Demo Page</a> demonstrates the concept of obtaining the filename to upload. As files are added, the filename is displayed in a table view below the controls.</p> <p>There are several options with the plugin that include callbacks that are fired after specific events take place. </p> <p>Here is an example that shows how to obtain the filename:</p> <pre><code>function (e, data) { $.each(data.files, function (index, file) { alert('Added file: ' + file.name); // filename alerted }); data.url = '/path/to/upload/handler.json'; var jqXHR = data.submit() .success(function (result, textStatus, jqXHR) {/* ... */}) .error(function (jqXHR, textStatus, errorThrown) {/* ... */}) .complete(function (result, textStatus, jqXHR) {/* ... */}); } </code></pre> <p>According to the documentation, you'll have the most chance of success if you bind the callback function using the <code>.bind</code> keyword of jQuery:</p> <pre><code>$('#fileupload') .bind('fileuploadadd', function(e, data) { ... } ); </code></pre> <p><strong>From the documentation on "add":</strong></p> <blockquote> <p>The data parameter allows to override plugin options as well as define ajax settings. data.files holds a list of files for the upload request: If the singleFileUploads option is enabled (which is the default), the add callback will be called once for each file in the selection for XHR file uploads, with a data.files array length of one, as each file is uploaded individually. Else the add callback will be called once for each file selection.</p> </blockquote> <p>Here is the full list of <a href="https://github.com/blueimp/jQuery-File-Upload/wiki/Options" rel="nofollow">jQuery File Upload Options</a>.</p> <p>In addition, only some browsers support image preview, which is your goal of accessing the filename:</p> <blockquote> <p><strong>Image previews</strong></p> <p>The following browsers have support for image previews prior to uploading files:</p> <ul> <li>Firefox 3.6+</li> <li>Google Chrome</li> <li>Opera 11+</li> </ul> </blockquote> <p>The <a href="https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support" rel="nofollow">Browser Support</a> page has more details on exactly what features of the plugin are and aren't supported in different browsers.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload