I use Uploadify to 开发者_开发知识库upload multiple pictures to server.
I want to display pictures thumbnails before the pictures are actually uploaded to the server, based on this. I use Firefox 3.6.6.
Here is how I thought to do this:
$('#fileInput').uploadify({
...
onSelect: function(event, queueID, fileObj) {
var img = document.createElement("img");
img.classList.add("obj");
img.file = file;
document.getElementById("ThumbnailsArea").appendChild(img);
var reader = new FileReader();
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
reader.readAsDataURL(fileObj); // This crashes Firefox
return true;
}
...
});
The reason for crash, I believe, is that fileObj
is not really a file
like here.
Does anyone know how to get the real file
when using Uploadify ?
I really need any advice, because I'm totally stuck with this !
Thank you very much, good people.
Your question was very interesting so I played around with the code you provided but I am afraid that what are you trying to do is not possible.
First thing that I discovered is that you are correct about fileObj differing from file that comes from input file component on onchange event and that is the most probable reason for the crash. While I was playing with your code I tried to emulate file properties with simple javascript object but that doesn't work either (FF crashes in the same way).
Second, uploadify uses flash (action script) to actually upload files. You can notice the similarity in events between uploadify's events and those of Filereference class. So this file input you have at the beginning is not used at all during the file upload process (it seems to me that it is used just to determine where to put flash object used for uploading). This can be verified by checking files property in input file object for example on uploadify's onselect event, or onopen event (in both cases files is a 0 size array).
I hope that this helps!
精彩评论