zoukankan      html  css  js  c++  java
  • HTML5可预览多图片ajax上传(使用formData传递数据)


    HTML5可预览多图片ajax上传(使用formData传递数据)

    在介绍上传图片之前,我们简单的来了解下FormData的基本使用;介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是ajax多图片上传前预览效果。

    1. formData的基本的用法:
    首先创建一个 空对象实例 代码如下:
    var formData = new FormData();

    1-1 获取值
    通过get(key)/getAll(key)来获取对应的value;比如:

    formData.get("name"); // 获取key为name的第一个值。
    formData.getAll("name"); // 返回一个数组,获取key为name的所有值。

    比如如下HTML代码:

    复制代码
    <!DOCTYPE html>
     <html>
        <head>
            <meta charset="utf-8">
            <title>标题</title>
        </head>
        <body>
          <form id="myForm">
            <input type="text" name="name" placeholder="请输入你的名字" />
            <input type="password" name="password" placeholder="请输入你的密码" />
        
            <input type="text" name="n1" />
            <input type="text" name="n1" />
    
            <input type="submit" id="submitId" value="提交" />
          </form>
          <script>
            // 表单初始化
            var form = document.getElementById('myForm');
            var submitId = document.getElementById("submitId");
            submitId.addEventListener('click', function(e){
              e.preventDefault();
              var formData = new FormData(form);
              // 获取名字
              var name = formData.get("name");
              var psw = formData.get("password");
              console.log(name);  
              console.log(psw);
    
              // 使用getAll 获取name为n1的所有值
              var arrs = formData.getAll("n1");
              console.log(arrs);  // 返回一个数组 
    
            }, false);
    
          </script>
        </body>
    </html>
    复制代码

    1-2 添加数据
    可以通过append(key, value)来添加数据,如果指定的key不存在则会新增一条数据,如果key存在,则添加到数据的末尾。

    复制代码
    var formData = new FormData();
    formData.append('name', 'kongzhi1');
    formData.append('name', 'kongzhi2');
    formData.append('name', 'kongzhi3');
    
    console.log(formData.get('name')); // kongzhi1
    console.log(formData.getAll('name')); // ["kongzhi1", "kongzhi2", "kongzhi3"]
    复制代码

    1-3 设置修改数据
    可以通过 set(key, value)来设置修改数据,如果指定的key不存在则会新增一条,如果存在,则会修改对应的值。

    复制代码
    var formData = new FormData();
    formData.append("name", 'kongzhi1');
    console.log(formData.getAll("name")); // ["kongzhi1"]
    
    formData.set("name", 'kongzhi2');
    console.log(formData.getAll("name")); // ["kongzhi2"]
    复制代码

    1-4 判断是否存在该数据
    我们可以通过has(key) 来判断是否有对应的key值。

    复制代码
    var formData = new FormData();
    formData.append("name", 'kongzhi1');
    formData.append("name2", null);
    
    console.log(formData.has("name")); // true
    console.log(formData.has("name2")); // true
    console.log(formData.has("name3")); // false
    复制代码

    1-5 删除数据
    通过delete(key), 来删除数据。

    复制代码
    var formData = new FormData();
    formData.append("name", "kongzhi1");
    formData.append("name", "kongzhi2");
    
    console.log(formData.getAll("name")); // ["kongzhi1", "kongzhi2"]
    
    formData.delete("name");
    console.log(formData.getAll("name")); // []
    复制代码

    二:使用XMLHttpRequest formData上传文件
    XMLHttpRequest2 定义了FormData类型,FormData为序列化表单以及创建与表单格式相同的数据(用于通过xhr数据传输)提供了便利。
    浏览器支持:IE9及IE9-不支持。

    原审XMLHttpRequest提交formData数据如下demo:

    复制代码
    <!DOCTYPE html>
     <html>
        <head>
            <meta charset="utf-8">
            <title>标题</title>
        </head>
        <body>
          <form name='form1' id='form1'>
            <input type='file' name='imgFile' />
            <input type='text' name='name1' />
            <input type='text' name='name2' />
    
            <div id="uploadImg">上传图片</div>
          </form>
          <script>
            var form1 = document.getElementById("form1");
            var uploadImg = document.getElementById("uploadImg");
            var xml = new XMLHttpRequest();
    
            uploadImg.addEventListener('click', function(e){
              e.preventDefault();
              var formData = new FormData(form1);
              xml.open("POST", url, true);
              xml.send(forData);
            });
          </script>
        </body>
    </html>
    复制代码

    2-2 使用jquery ajax方式来上传formData数据如下:

    HTML代码如下:

    复制代码
    <div id="container">
      <a href="javascript:void(0)" class="file">选择文件
         <input type='file' id="file" multiple accept = 'image/gif,image/jpeg,image/jpg,image/png' />
         <input type="hidden" />
       </a>
    </div>
    复制代码

    javascript 代码如下:

    复制代码
    var formdata = new FormData();
    // 上传到服务器的字段名称
    formdata.append("imgFile", $('#file')[0].files[0]);
    $.ajax({
      url: self.url,
      type: 'POST',
      cache: false,
      data: formdata,
      timeout: 5000,
      //必须false才会避开jQuery对 formdata 的默认处理 
      // XMLHttpRequest会对 formdata 进行正确的处理
      processData: false,
      //必须false才会自动加上正确的Content-Type 
      contentType: false,
      xhrFields: {
        withCredentials: true
      },
      success: function(data) {
    
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
    
      }
    复制代码

    如上参数设置含义如下:
    1. processData: false, 因为data值是formdata对象,不需要对数据做处理。
    2. cache: false, 上传文件不需要缓存。
    3. contentType: false, 因为是由<form>表单构造的FormData对象,且已经声明了属性enctype="multipart/form-data",所以这里设置为false。
    4. xhrFields: { withCredentials: true }, 跨域请求设置

    下面是一个 使用 ajax中的formData 多张图片上传前预览效果的一个demo。

    formData 对ajax多张图片上传前预览效果如下

    查看效果

     

  • 相关阅读:
    springcloud 项目源码 微服务 分布式 Activiti6 工作流 vue.js html 跨域 前后分离
    springcloud 项目源码 微服务 分布式 Activiti6 工作流 vue.js html 跨域 前后分离
    OA办公系统 Springboot Activiti6 工作流 集成代码生成器 vue.js 前后分离 跨域
    java企业官网源码 自适应响应式 freemarker 静态引擎 SSM 框架
    java OA办公系统源码 Springboot Activiti工作流 vue.js 前后分离 集成代码生成器
    springcloud 项目源码 微服务 分布式 Activiti6 工作流 vue.js html 跨域 前后分离
    java 视频播放 弹幕技术 视频弹幕 视频截图 springmvc mybatis SSM
    最后阶段总结
    第二阶段学习总结
    第一阶段学习总结
  • 原文地址:https://www.cnblogs.com/huangwentian/p/9172188.html
Copyright © 2011-2022 走看看