I want to use ajaxfileUpload to upload mutiple images to the server, so i user the callback change(),when input value change,i call the upload function, but it only work once successfully,do you have any ideas? here is the code:
<div class='popup_content clearfix' id="imagecontainer">
</div>
<script id="imagePreview" type="text/template">
<div class='popup_img_container'>
<img class='popup_img' src="<%= imageUrl%>" id="imagepreview<%= imageCount %>">
</div>
</script>
<input type="file" id="postPic" name="fileToUpload"/>
var imageCount=0;
function uploadImage(){
alert( $("#postPic").val());
$.ajaxFileUpload({
url:'myurl',
secureuri :false,
fileElementId :"postPic",//file控件id
dataType : 'json',
success : function (data, status){
alert("done");
//$("#postAllpic").addClass("hidden");
},
error: function(data, status, e){
alert(e);
}
});
}
$("#postPic").change(function(){
var objUrl = getObjectURL(this.files[0]) ;
if (objUrl) {
var imageObj={};
imageObj.imageUrl=objUrl;
imageObj.imageCount=imageCount;
var html=_.template($("#imagePreview").html(),imageObj);
$("#imagecontainer").append(html);
uploadImage();
imageCount++;
alert(imageCount);
}
});
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}