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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m0_37827333/article/details/70232887

这次项目用到了图片和文件上传到后台,刚开始用的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表单上传,谢谢!

阅读更多
换一批

没有更多推荐了,返回首页