更新18/11/2012：此上傳的新版本現在在此處jQuery Ajax Image上傳縮略圖示例。
這就是您可以將文件/圖像上傳工具添加到您的表單中，並使Ajax用PHP存儲文件，並將縮略圖版本返回給用戶以顯示在表單上。好的。
<span>/*******************************************************************
</span><span> JS - PREVIEW IMAGE
</span><span>*******************************************************************/
</span><span>function previewImage(str) {
</span> <span>//alert(str);
</span> <span>ajaxFileUpload();
</span><span>}
</span>
<span>function removeImage() {
</span> <span>//alert("Image Removed");
</span> <span>$("#imagethumb").html('');
</span> <span>$("#removebutton").hide();
</span> <span>$("#supportedfiles").show();
</span> <span>var tid = $("Input[name=allocatedimagename]").val();
</span> <span>//remove the temporary image files created by the image
</span> $<span>.get("/php/deleteblogthumb.php",{thumb_name: tid, type: 'js-blog'}, function(data){
</span> <span>//alert(data);
</span> <span>});
</span>
<span>$("Input[name=allocatedimagename]").val('');
</span> <span>$("Input[name=blogpic]").val('');
</span><span>}
</span>
<span>function ajaxFileUpload() {
</span> <span>//starting setting some animation when the ajax starts and completes
</span> <span>$("#loading")
</span> <span>.ajaxStart(function(){
</span> <span>$(this).show();
</span> <span>})
</span> <span>.ajaxComplete(function(){
</span> <span>$(this).hide();
</span> <span>});
</span>
<span>/*
</span><span> prepareing ajax file upload
</span><span> url: the url of script file handling the uploaded files
</span><span> fileElementId: the file type of input element id and it will be the index of $_FILES Array()
</span><span> dataType: it support json, xml
</span><span> secureuri:use secure protocol
</span><span> success: call back function when the ajax complete
</span><span> error: callback function when the ajax failed
</span><span>
</span><span> */
</span> $<span>.ajaxFileUpload
</span> <span>(
</span> <span>{
</span> <span>url:'doajaxfileupload.php',
</span> <span>secureuri:false,
</span> <span>fileElementId:'blogpic',
</span> <span>dataType: 'json',
</span> <span>success: function (data<span>, status</span>)
</span> <span>{
</span> <span>if(typeof(data.error) != 'undefined')
</span> <span>{
</span> <span>if(data.error != '')
</span> <span>{
</span> <span>alert(data.error);
</span> <span>}else
</span> <span>{
</span> <span>//alert(data.loc);
</span> <span>//show the preview of image
</span> <span>var imageloc = '<span >Your uploaded image: <samp>'+data.name+'('+data.size+'kb)'+'</samp><br /><img src="'+data.loc+'" height="40" width="40" alt="your uploaded image"/></span>';
</span> <span>$("#imagethumb").html(imageloc); //add
</span> <span>$("#removebutton").show();
</span> <span>$("#supportedfiles").hide();
</span> <span>//save the allocated image name for use with the process signup script
</span> <span>$("Input[name=allocatedimagename]").val(data.loc);
</span> <span>}
</span> <span>}
</span> <span>},
</span> <span>error: function (data<span>, status, e</span>)
</span> <span>{
</span> <span>alert(e);
</span> <span>}
</span> <span>}
</span> <span>)
</span>
<span>return false;
</span>
<span>}</span>以上是顯示圖像的縮略圖上傳Ajax/php的詳細內容。更多資訊請關注PHP中文網其他相關文章！
