2018/5/18 15:02:25当前位置推荐好文程序员浏览文章

图片上传并回显Ajax异步篇

图片如何无刷新的上传到服务器呢?继前两篇文章后,我们来实战一下如何无刷新的异步上传图片,我们还是先看一下效果

图片上传并回显Ajax异步篇

在实战前呢,我们需要做些准备工作。比方说,理解一下FormData对象

“FormData对象使用以将数据编译成键值对,以便使用XMLHttpRequest来发送数据。其主要使用于发送表单数据,但亦可使用于发送带键数据(keyed data),而独立于表单用。假如表单enctype属性设为multipart/form-data ,则会用表单的submit()使用来提交表单,这个方法和提交表单按钮很相似。")方法来发送数据,从而,发送数据具备同样形式。”

这是官方的讲解,我来说一下我的了解,我们new 一个FormData( $(form) )对象时,它会帮我们把form表单里的数据封装成键值对的形式,以前我们都时使用input的submit进行提交数据,当我们拿到这个form对象的时候,我们即可以使用ajax模拟input的submit提交,既然知道了这些,我们就开始一步步的编程吧。

我们先完善一下界面,看一下下面的代码

这是body里的内容,不要忘了form,只是没有了action,enctype属性也要设置好,我的上一篇文章有对enctype的讲解 图片上传并回显后台篇

<body><form id="formTag1" enctype="multipart/form-data">    <div class="uploadImgBtn" id="uploadImgBtn">        <input class="uploadImg" type="file" name="file" id="file1">    </div></form></body>

这是css里的内容

<style>    .uploadImgBtn {        width: 100px;        height: 100px;        cursor: pointer;        position: relative;        background: url("img/plus.png") no-repeat;        -webkit-background-size: cover;        background-size: cover;    }    .uploadImgBtn .uploadImg {        position: absolute;        right: 0;        top: 0;        width: 100%;        height: 100%;        opacity: 0;        cursor: pointer;    }    .pic {        width: 100px;        height: 100px;    }    .pic img {        width: 100%;        height: 100%;    }</style>

基本的样式都已经编写完成,我们来参观一下吧


好了,我们开始编写我们的jquery代码吧,在编写之前我们理一下思路,当使用户选择好图片时,即input 的change事件触发时,我们就把图片上传到服务器,服务端返回图片的url,我们拿到这个url时,把它设置为我们input外面盒子的背景图。既然知道了思路我们就编写一下代码吧

<script>    $(document).ready(function(){        $("#file1").on("change", upload );    })    function upload(){        /          我们存一下this对象,          我们将在ajax的回调函数中,          将要使用这个对象,          使用它来改变父盒子的背景图                  /        var self = this;        //假如不了解我写的,能看看我的前几篇文章        $.ajax({            url: "/UpImg/upload",            type: "post",            dataType: "json",            cache: false,            data: new FormData($("#formTag1")[0]),            processData: false,// 不解决数据            contentType: false, // 不设置内容类型            success: function(data){                /                    后台返回的数据格式为                    {"url": "xxxxxx"}                 /                $(self).parent().css({                    "background-image": "url("+data.url+")"                })            }        })    }</script>

我们把change事件的执行函数独立出来,由于我们可可以还需要使用到这个函数。函数也没有什么难点,就是保存一个this对象,加一个ajax。我们来看一下效果图

我们已经实现了change事件触发时,我们把图片上传到服务器,我们也能改变我们已经选择好的图片,到这里一定还没有结束。由于使用户只是选择了一张图片,假如我们的业务需要使用户上传多张图片呢,那我们这个一定就不满足要求了,我们需要再给我们的代码增加少量功可以。比方说,当使用户选择好一张后,再生成一个form->input标签,而后就这样递归;但我们还需要加少量条件,就是当使用户改变已经选择好的图片时,我们不可以生成form->input标签。好了需求大概就是这样的。

我们来理一下思路:

1、我们需要给form标签外面增加一个盒子,我们把所有生成的form标签都放里面。

2、我们需要有一个计数器,记录form的个数,也是通过这个我们能给form和input设置不同的id

3、我们需要判断当前change事件是第几个,假如它的id中的数值部分和count一样,我们就新生成一个form,否则就返回

我们先看一下我们的html部分

<body><div id="formBox">    <form id="formTag1" enctype="multipart/form-data">        <div class="uploadImgBtn" id="uploadImgBtn">            <input class="uploadImg" type="file" name="file" id="file1">        </div>    </form></div></body>

我们来编码实现一下js

<script>    //作为第几个form的标志    var = 1;    $(document).ready(function(){        $("#file1").on("change", upload );    });    function upload(){        var self = this;        //取得它是第几个form表单        var num = this.getAttribute("id").replace(/[a-zA-Z]/g,"");        //构造form的选择器        var $form = "#formTag" +num;        $.ajax({            url:"/UpImg/upload",            type:"post",            dataType:"json",            cache:false,            data: new FormData($($form)[0]),            processData: false,// 不解决数据            contentType: false, // 不设置内容类型            success:function(data){                //设置背景为我们选择的图片                $(self).parent().css({                    "background-image": "url("+data.url+")"                });                //我们再生成一个form                if(== num ){                    //count计数加1                    +=1;                    var str = <form id="formTag+count+" enctype="multipart/form-data">+                        <div class="uploadImgBtn" id="uploadImgBtn">+                        <input class="uploadImg" type="file" name="file" id="file+count+">+                        </div>+                        </form>   ;                    //向最外面的盒子增加form                        $("#formBox").append($(str));                    //构造input的选择器                    var $sel = "#file"+count;                    //为新生成的input绑定change事件                    $($sel).on("change", upload );                }else{                    //假如不等于                    return false;                }            }        });    }</script>

这样的话我们基本就实现了我们的效果,就如开头中的效果,这个是能无限增加form的,到时候能给count设置一个上界,根据自己的业务来调整吧,到此我们的图片上传并回显系列就算完结了;

听说520快到了,我们是不是需要new一个会说话的对象呢,520的时候我们就来实战new一个对象吧,也是作为一个礼物送给大家呢(手动滑稽)

图片上传并回显系列
如何使用input标签上传多个图片并回显
图片上传并回显后台篇

网友评论