Tunjukkan Thumbnail Imej Muat naik Ajax/PHP

UPDATE 18/11/2012: Versi baru muat naik ini kini di sini JQuery Ajax Image Upload Thumbnail Contoh. Ini adalah bagaimana anda boleh menambah alat muat naik fail/imej ke borang anda dan mempunyai Ajax Store fail dengan PHP dan mengembalikan versi kecil kepada pengguna untuk dipaparkan pada borang. Bagus. Takeaways Key

Gunakan AJAX dengan PHP untuk menyelaraskan proses muat naik imej, yang membolehkan pratonton lakaran kecil masa nyata tanpa memuat semula halaman.
Pastikan pengalaman pengguna yang lancar dengan melaksanakan skrip jQuery yang mengendalikan fail muat naik secara dinamik dan memaparkan pratonton lakaran kecil dengan serta -merta.
menggabungkan skrip PHP untuk menjana dan mengembalikan URL kecil dalam format JSON, memudahkan integrasi dan manipulasi mudah di sisi klien.
Menyediakan pengendalian ralat komprehensif dan maklum balas pengguna semasa proses muat naik untuk mengekalkan fungsi dan penglibatan pengguna yang mantap.

bagaimana ia berfungsi

pengguna memilih fail/imej dari medan input borang
jQuery menghantar permintaan ajax dengan fail/imej
php mencipta versi lakaran kecil dan menghantar semula URL dalam format JSON
jQuery memaparkan versi kecil dalam bentuk

Muat turun

jQuery4u-file-uploader-thumbnail.zip

doajaxfileupload.php
ajaxfileupload.php
jQuery.php
form-Html.php
Muat turun Sumber Filessee Live Demo

kod jQuery - jQuery.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>

kod jQuery - ajaxfileupload.js

Atas ialah kandungan terperinci Tunjukkan Thumbnail Imej Muat naik Ajax/PHP. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!