Clever Geek Handbook

Can any HTML or JavaScript API be used to get the file path in the input file [type = file]?

I want to implement an image upload function.

After uploading, I want to get the local file path in order to create a thumbnail. But how can I get the file path? Is there any other way to create a thumbnail?

I tried the jQuery-File-Upload plugin.

+3


source to share


3 answers


I think chrome supports this, but not sure if it's removed for security reasons. Anyway you can try playing with javascrip to set a custom width and height of some div and use the readAsDataURL of the uploaded file



 <script type="text/javascript">     

function uploadFile(input) {         

if (input.files && input.files[0]) {            

 var reader = new FileReader();              
 reader.onload = function (e) {                 
 $('#test').attr('src', e.target.result).width(100).height(100);             
 };               
 reader.readAsDataURL(input.files[0]);        
 }     
} 

</script> 

<input type='file' onchange="uploadFile(this);" />     <img id="test" src="#" alt="my image" />
0


source


For security reasons, there is no way to get the file path. You only get the file name, deleting fakepath

of values input.value.split("/")[1]

.



To create a sketch, use an already downloaded file, not a local one.

+1


source


The jQuery File Upload Demo Page demonstrates the concept of getting the filename to upload. As files are added, the file name is displayed in a table below the controls.

The plugin has several options for enabling callbacks that are triggered after certain events.

Here's an example that shows how to get the filename:

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) {/* ... */});
}

According to the documentation, you have a better chance of success if you bind the callback function using the .bind

jQuery keyword :

$('#fileupload')
   .bind('fileuploadadd', function(e, data) { ... } );

From the documentation on "add":

The data parameter allows you to override plugin parameters as well as define ajax parameters. data.files contains a list of files to request to upload: if the singleFileUploads option is enabled (which is the default), the add callback will be called once for each file in the XHR file upload selection, with the data.files array of length one, since each the file is downloaded separately. Another callback will be called once for each file selection.

Here is a complete list of jQuery File Upload Options .

Also, only a few browsers support image preview, which aims to access the filename:

Image preview

The following browsers support previewing images before uploading files:

  • Firefox 3.6+
  • Google chrome
  • Opera 11 +

The Browser Support page contains detailed information on which plugin features are supported and not supported in different browsers.

+1


source






More articles:


All Articles