图片、文件表单上传以及异步上传

这次项目用到了图片和文件上传到后台，刚开始用的form表单，但是有一点不好的，就是点击上传后会跳转到action页面，用户体验非常不舒服，所以就改为用ajax异步上传，现把我的心得上传如下：

1、form表单

<form action="http://localhost....."  method="post" enctype="multipart/form-data">
        <input type="file" id="fileId" name="image" value="请上传图片" />
        <input type="hidden" id="hiddId" name="id" value="1"/>
        <input type="button" id="submit" value="上传"/>
    </form>

后台需要我上传image 和id （enctype="multipart/form-data"这个必须写）。

2、异步上传

<form action=""  method="post" enctype="multipart/form-data">
        <input type="file" id="fileId" name="image" value="请上传图片" />
        <input type="hidden" id="hiddId" name="id" value="1"/>
        <input type="button" id="submit" value="上传"/>
    </form>
    <script type="text/javascript">
        $("#submit").click(function () {
            var a = new FormData();
            a.append("image", $("#fileId")[0].files[0]);
            a.append("id", 1);
            $.ajax({
                url:"http://localhost.....",
                xhrFields:{
                        withCredentials:true
                },
                type: "POST",
                cache: false,
                data: a,
                processData: false,
                contentType:false,
                async: false,
                success: function (result) {

                }
                //cache 上传文件不需要缓存，所以设置false
                //processData 因为data值是FormData对象，不需要对数据处理
                //contentType 因为是由form表单构造的FormData对象，且已声明了属性enctype，所以为false
            })
        })
    </script>

好的，ok了，结束了，这就是关于我的项目中的文件、图片的异步上传和form表单上传，谢谢！