I want to implement an upload image function.
After uploading, I want get the file local path so I can create a thumbnail. But how can I get the file path? Is there another way to create the thumbnail?
I have tried jQuery-File-Upload plugin.
Add a comment
|
3 Answers
The jQuery File Upload Demo Page demonstrates the concept of obtaining the filename to upload. As files are added, the filename is displayed in a table view below the controls.
There are several options with the plugin that include callbacks that are fired after specific events take place.
Here is an example that shows how to obtain 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'll have the most chance of success if you bind the callback function using the .bind keyword of jQuery:
$('#fileupload')
.bind('fileuploadadd', function(e, data) { ... } );
From the documentation on "add":
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.
Here is the full list of jQuery File Upload Options.
In addition, only some browsers support image preview, which is your goal of accessing the filename:
Image previews
The following browsers have support for image previews prior to uploading files:
- Firefox 3.6+
- Google Chrome
- Opera 11+
The Browser Support page has more details on exactly what features of the plugin are and aren't supported in different browsers.
For security reasons, there is no way to get the filepath. You can only get the filename by removing fakepath from the value: input.value.split("/")[1].
To create a thumbnail, use the file which is already uploaded, not the local one.
Comments
I think chrome supports this but not sure whether it is removed due to security reasons.Anyways you can try playing with javascrip to set custom width and height of some div and use 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" />
2 Comments
jamesmortensen
Can you show an example of this? It's customary to include details and objective, concrete facts in answers on Stackoverflow. For instance, why not show an example of using readAsDataURL to accomplish what you're suggesting?
Krishnanunni Jeevan
html5rocks.com/en/tutorials/file/dndfiles/..there is a method to get thumbnails after getting file handle...Try the script in edit