图片上传并回显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 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标签上传多个图片并回显

图片上传并回显后端篇

图片上传并回显Ajax异步篇的更多相关文章

  1. 2.0 vue2+tinymce实现图片上传与回显

    1.效果 2.配置 2.1 在init中添加图片上传函数 // 图片上传 images_upload_handler: (blobInfo, success, failure) => { // ...

  2. SpringBoot系列——附件管理：整合业务表单实现上传、回显、下载

    前言 日常开发中,大多数项目都会涉及到附件上传.回显.下载等功能,本文记录封装通用附件管理模块,并与业务模块进行整合实现上传.回显.下载 我们之前已经对文件上传下载有过记录,传送门:基于"f ...

  3. 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

    首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...

  4. Ajax图片异步上传并回显

    1.jsp页面 <td width="20%" class="pn-flabel pn-flabel-h"></td> <td w ...

  5. springboot+thymeleaf 实现图片文件上传及回显

    1. 创建一个springboot工程, 在此就不多说了(目录结构). 2. 写一个HTML页面 <!DOCTYPE html> <html lang="en" ...

  6. bootstrap fileinput控件 + django后台上传、回显简单使用

    一.控件下载:https://github.com/kartik-v/bootstrap-fileinput/ 官网:http://plugins.krajee.com/file-input 需要引入 ...

  7. bootstrap inputfile 使用-上传，回显

    近期用bootstrap 做前端的上传,功能涉及到上传时就是召网上的教程随便弄一搜一大把,但是做到修改页面时候不知道页面该如何回显,折腾了一阵子才完成遂记录下来希望能给看到的小伙伴有点启发吧. 首先是 ...

  8. 支持多文件上传，预览，拖拽，基于bootstra的上传插件fileinput 的ajax异步上传

    首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet"&g ...

  9. 支持多文件上传，预览，拖拽，基于bootstrap的上传插件fileinput 的ajax异步上传(转载)

    首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet"&g ...

随机推荐

  1. activity和fragment之前运行的生命周期

    1.activity生命周期 2.fragment的生命周期 3.对比图 4.测试代码 package com.goso.testapp; import android.app.Activity; i ...

  2. JAVA8的LocalDateTime使用心得和工具类

    今天做不成的事,明天也不会做好. 同学们,JAVA8出了这么久,不知道你们有没有用过它的LocalDateTime类型,还是依然用Date类型呢?其实,LocalDateTime类型给我们提供了很多便 ...

  3. jquery 元素选择器

    id选择器 JQuery 能使用CSS选择器来操作网页中的标签元素.如果想要通过一个id号去查找另一个元素就可以使用下面格式的选择 $('#my_id') 其中my_id表示根据id选择器获取页面中的 ...

  4. Win10系列：VC++数据绑定

    数据绑定是一种将后台数据绑定到前台控件的机制,通常用于动态地将对象或集合中所保存的数据显示到前台界面中.本节通过一个具体的示例来说明在Windows应用商店应用中如何通过数据绑定将保存在集合中的数据显 ...

  5. Python之路-python基础二

    本章内容:      一.编码格式      二.常用数据类型      三.字符串常用方法      四.列表常用方法  五.数据运算      六.课后作业 编码格式:       ASCII A ...

  6. iOS 统一配置

    1 .统一设置nav标题样式: - (void)_setNavigationTitle { NSDictionary *navigationParams = @{NSForegroundColorAt ...

  7. Cracking The Coding Interview 4.0_二叉树

    #include <iostream> #include <string> using namespace std; class tree { public: tree() { ...

  8. Android : SELinux 简析&修改

    一 SELinux背景知识 SELinux出现之前,Linux上的安全模型叫DAC,全称是Discretionary Access Control,翻译为自主访问控制.DAC的核心思想很简单,就是: ...

  9. loadrunner json参数化

    因为json格式有{},所以LR参数化时如果也用默认的{}的话,会冲突,这样脚本运行时就无法识别,导致不能正确的读取参数化文件里的内容,此时把参数化的{}改成其他符号即可,比如<>

  10. SQL-14 从titles表获取按照title进行分组，每组个数大于等于2，给出title以及对应的数目t。 注意对于重复的emp_no进行忽略。

    题目描述 从titles表获取按照title进行分组,每组个数大于等于2,给出title以及对应的数目t.注意对于重复的emp_no进行忽略.CREATE TABLE IF NOT EXISTS &q ...