图片上传并回显Ajax异步篇

时间 2019-11-17

标签图片上传 ajax 异步栏目 Ajax 繁體版

原文原文链接

图片上传并回显Ajax异步篇

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

在实战前呢，咱们须要作些准备工做。好比说，了解一下FormData对象html

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

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

咱们先完善一下界面，看一下下面的代码ajax

这是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里的内容json

<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。咱们来看一下效果图app

咱们已经实现了change事件触发时，咱们把图片上传到服务器，咱们也能够改变咱们已经选择好的图片，到这里确定尚未结束。由于用户只是选择了一张图片，若是咱们的业务须要用户上传多张图片呢，那咱们这个确定就不知足要求了，咱们须要再给咱们的代码添加一些功能。好比说，当用户选择好一张后，再生成一个form->input标签，而后就这样递归；但咱们还须要加一些条件，就是当用户改变已经选择好的图片时，咱们不能生成form->input标签。好了需求大概就是这样的。

咱们来理一下思路：

一、咱们须要给form标签外面添加一个盒子，咱们把全部生成的form标签都放里面。

二、咱们须要有一个计数器，记录form的个数，也是经过这个咱们能够给form和input设置不一样的id

三、咱们须要判断当前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 count = 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(count == num ){
                    //count计数加1
                    count +=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标签上传多个图片并回显
 图片上传并回显后端篇