PHP+jQuery+Ajax单(多)图片上传

1 篇文章 0 订阅

近日写的一个销售管理系统中,需要用户上传产品的图片,找了好多插件,用起来都挺麻烦的而且还不好改,最后找到一篇用php和ajax做图片上传的,感觉代码挺简单的而且改起来很容易,转发到此处与各位分享一下:

我们在本文中用到一个Ajax表单提交插件:jqery.form.js,有高人修改了几行代码并改名为:jquery.wallform.js,直接拿来用。

HTML部分
我们在页面上放置一个form表单,使用post提交到后台php处理程序upload.php,注意enctype属性设置要支持文件上传。#preview用来显示上传完毕后的图片。关于css样式设置本文不加说明,请参照下载包的源码。

<form id="imageform" method="post" enctype="multipart/form-data" action="upload.php"> 
    <div id="up_status" style="display:none"><img src="loader.gif" alt="uploading"/></div> 
    <div id="up_btn" class="btn"> 
        <span>添加图片</span> 
        <input id="photoimg" type="file" name="photoimg"> 
    </div> 
</form> 
<p>最大100KB,支持jpg,gif,png格式。</p> 

<div id="preview"></div> 

jQuery部分
本实例基于jQuery,因此必须在页面中载入jquery库以及jquery.wallform.js
当点击按钮“添加图片”后,弹出选择文件对话框,选择要上传的图片后,触发change事件。然后表单#imageform调用jquery.wallform.js的ajaxForm()方法,将表单数据提交给后台PHP处理,并根据返回结果处理页面元素的展示。如果上传成功,图片会一张张排列显示在页面上。关于ajaxForm()的使用可以参照本站文章:Ajax表单提交插件jqery form。

<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jquery.wallform.js"></script> 
$(function(){ 
    $('#photoimg').die('click').live('change', function(){ 
        var status = $("#up_status"); 
        var btn = $("#up_btn"); 
        $("#imageform").ajaxForm({ 
            target: '#preview',  
            beforeSubmit:function(){ 
                status.show(); 
                btn.hide(); 
            },  
            success:function(){ 
                status.hide(); 
                btn.show(); 
            },  
            error:function(){ 
                status.hide(); 
                btn.show(); 
        } }).submit(); 
    }); 
});

PHP部分
upload.php处理图片上传,并将上传好的图片保存在uploads/目录,注意该目录要有写权限。首先需要检测是否为POST方式提交,然后判断图片格式、图片大小是否符合要求,然后使用move_uploaded_file()上传图片,并将图片重命名,格式为:time().rand(100,999)。

$path = "uploads/"; 

$extArr = array("jpg", "png", "gif"); 

if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){ 
    $name = $_FILES['photoimg']['name']; 
    $size = $_FILES['photoimg']['size']; 

    if(empty($name)){ 
        echo '请选择要上传的图片'; 
        exit; 
    } 
    $ext = extend($name); 
    if(!in_array($ext,$extArr)){ 
        echo '图片格式错误!'; 
        exit; 
    } 
    if($size>(100*1024)){ 
        echo '图片大小不能超过100KB'; 
        exit; 
    } 
    $image_name = time().rand(100,999).".".$ext; 
    $tmp = $_FILES['photoimg']['tmp_name']; 
    if(move_uploaded_file($tmp, $path.$image_name)){ 
        echo '<img src="'.$path.$image_name.'"  class="preview">'; 
    }else{ 
        echo '上传出错了!'; 
    } 
    exit; 
} 

//获取文件类型后缀 
function extend($file_name){ 
    $extend = pathinfo($file_name); 
    $extend = strtolower($extend["extension"]); 
    return $extend; 
} 

在项目实际中,我将php中输出的内容(无论错误信息或者是最后的文件路径)都返回到了原页面,在每次上传一张图片时就将图片路径用js拼接在一起,并写入保存在了一个hidden的input中(写入直接用js获取input的id值并$(“#id”).val(path)即可),在提交表单时连同所有信息提交过去,这样就能根据php返回的信息判断图片是否上传成功。
以上是多图的上传模式。

如果要变成单图上传,只要在每次上传前清空input的值,然后再提交表单到后台即可。

缺点
此插件有一点不好的地方就是当你上传错图片重新上传新的图片时,原先的图片仍会被上传至服务器,存在错误冗余的问题。改进方法可能是需要自己写一个服务器小程序进行处理,具体依据项目而行。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值