显示图像的缩略图上传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中文网其他相关文章！