jquery + php + ajax 提交form表单插件jquery.form.js 来实现上传图片

基本HTML：
<form class="imageform" method="post" enctype="multipart/form-data" action="form.php">
<input class="photoimg" type="file" name="photoimg">
<input type="hidden" class="thumb" name="thumb" /> //隐藏图片值
</div>
<img class="preview_img" src="" /> //显示图片
</form>

JQuery 操作：
<script type="text/javascript">
    $(function() {
        $("body").on("change", ".photoimg", function() {
            $(".imageform").ajaxSubmit({
                url: "upload.php",          //默认是form的action
                //type: type,               //默认是form的method（get or post）
                dataType: "json",           //html(默认), xml, script, json...接受服务端返回的类型
                //clearForm: true,          //成功提交后，清除所有表单元素的值
                //resetForm: true,          //成功提交后，重置所有表单元素的值
                //target: '#output',          //把服务器返回的内容放入id为output的元素中
                //timeout: 3000,               //限制请求的时间，当请求大于3秒后，跳出请求
                //提交前的回调函数
                beforeSubmit: function(arr,$form,options){
                    //formData: 数组对象，提交表单时，Form插件会以Ajax方式自动提交这些数据，格式如：[{name:user,value:val },{name:pwd,value:pwd}]
                    //jqForm:   jQuery对象，封装了表单的元素
                    //options:  options对象
                    //比如可以再表单提交前进行表单验证
                    //console.log("beforeSubmit",arr,$form,options)
                },
                //提交成功后的回调函数
                success: function(data,status,xhr,$form){
                    //console.log("success",data,status,xhr,$form);
                    if(data.status){
                        $(".preview_img").attr("src",data.thumb).show();
                        $(".thumb").val(data.thumb);
                        //console.log(data.Content)
                    }
                },
                error: function(xhr, status, error, $form){
                   // console.log("error",xhr, status, error, $form)
                },
                complete: function(xhr, status, $form){
                    //console.log("complete",xhr, status, $form)
                }
            }
        );
        return false; //阻止表单默认提交
        });
    });
</script>

upload.php 上传文件

$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 > (1000 * 1024)) {
        echo '图片大小不能超过1M';
        exit;
    }
    $image_name = time() . rand(100, 999) . "." . $ext;
    $tmp = $_FILES['photoimg']['tmp_name'];
    if (move_uploaded_file($tmp, $path . $image_name)) {
        echo json_encode(array('status'=>1,'thumb'=>$path.$image_name));
    } else {
        echo json_encode(array('status'=>0,'thumb'=>$path.$image_name));
    }
    exit;
}
exit;

function extend($file_name) {
    $extend = pathinfo($file_name);
    $extend = strtolower($extend["extension"]);
    return $extend;
}

jquery.form.js下载：jquery.form.zip