顯示圖像的縮略圖上傳Ajax/php

更新18/11/2012：此上傳的新版本現在在此處jQuery Ajax Image上傳縮略圖示例。 這就是您可以將文件/圖像上傳工具添加到您的表單中，並使Ajax用PHP存儲文件，並將縮略圖版本返回給用戶以顯示在表單上。好的。

鑰匙要點

• >使用PHP使用AJAX來簡化圖像上傳過程，允許實時縮略圖預覽，而無需重新加載頁面。
• >通過實現動態處理文件上傳並立即顯示縮略圖預覽的jQuery腳本來確保無縫的用戶體驗。
>
• 合併PHP腳本以生成和返回JSON格式的縮略圖URL，促進客戶端輕鬆整合和操縱。
>
• >在上傳過程中提供全面的錯誤處理和用戶反饋，以維持強大的功能和用戶參與度。

它的工作原理

1. 用戶從表單輸入字段中選擇一個文件/圖像
2. > jQuery發送帶有文件/圖像
的Ajax請求 PHP創建縮略圖版本，並以JSON格式發回URL
3. > jQuery在表單上顯示縮略圖

>下載

> jquery4u-file-uploader-thumbnail.zip

> doajaxfileupload.php

• ajaxfileupload.php
• > jquery.php
• form-html.php
• 下載源Filessee Live演示
jQuery代碼 - jQuery.js

jQuery代碼 - ajaxfileupload.js

<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中文網其他相關文章！