zoukankan      html  css  js  c++  java
  • 移动端通过ajax上传图片(文件)并在前台展示——通过H5的FormData对象

    前些时候遇到移动端需要上传图片和视频的问题,之前一直通过ajax异步的提交数据,所以在寻找通过ajax上传文件的方法。发现了H5里新增了一个FormData对象,通过这个对象可以直接绑定html中的form元素,然后通过ajax提交的时候直接提交这个对象就好了。

     在移动端调用视频和音频:

    <input type="file" accept="image/*" capture="camera">     //调用相册和摄像头
    <input type="file" accept="video/*" capture="camcorder">  //视频
    <input type="file" accept="audio/*" capture="microphone">  //音频

    以上传图片为例

    html中的代码:

    <input type="file" id="file" name="file" accept="image/*" />

    当然如果你想要上传多张图片也是可以的,只要加上“multiple”属性

    <input type="file" id="file" name="file" accept="image/*" multiple />

    (其实只需要写上type和id就可以了)

    我们可以通过打印台看到传到的里面的内容

    var file = document.getElementById("file");
    console.log(file.files);

    得到的是一个类似于一个数组的泛类集合,我们可以像取数组一样取到第i个:file.files[i]

    在JS中,我们需要先new一个FormData对象

    var form = new FormData();

    然后把我们传完的图片添加到这个FormData对象中去,这里用到append

    form.append("fileImg",file.files);

    然后我们就可以通过ajax向后台传递数据了,我习惯用的jquery的ajax

    $.ajax({
          type: "post",
          url: "传输的地址",
          data: form,
          contentType: false, // 注意这里应设为false
          processData: false,    //false
          cache: false,    //缓存
          success: function(data){
              console.log(data);      
          }
    })

    注意:里面设为false的三个参数:

    contentType:发送信息至服务器时内容编码类型,默认是application/x-www-form-urlencoded

    processData:默认会把data的数据转为字符串

    cache:设置为 false 将不缓存此页面

    这里如果是跨域传输的话会出现问题,传文件时是不能设置dataType:"jsonp"的,会出现问题,想要跨域的话尽量不要使用这个方法(是我比较菜还不会传,手动捂脸,欢迎指导),当然通过后台设置允许访问的地址也可以

    FormData对象是封闭的,没有办法通过console.log(form)打印到打印台,想要查看form对象里的值可以通过浏览器调试工具的Network里查看

    通常我们传递数据当然不是只传文件,因此我们需要把要传的每一条都append到FormData里。

    我们可以在html中加一个form表单并获取到它的id,然后form表单中的数据可以直接绑到FormData里

    html:

    <form id="formTest">
        <input type="text" name="name1" />
        <input type="text" name="name2"/>
        <input type="file" name="file" id="file"/>
    </form>

    js:

    var formTest = document.getElementById("formTest");
    var form = new FormData(formTest);

    这样会自动获取到form表单中name和value并添加到formdata对象里

    通常我们在传入图片后,会想让图片在前台页面展示,这里我们要用到H5的FileReader。

    我的做法是:前端放一张图片,点击图片的时候触发隐藏的上传文件的input,input改变时调用prewviewImg方法

    html:

    <div class="pic" id="wholeImg"><img id="img1" src="img/a11.png"/></div>
    <input type="file" name="whole" id="whole" style="display: none;" capture="camera" onchange="previewImg(this)" />

    js:

    $("#wholeImg").click(function(){
        $("#whole").click();
    })
    
    
    function previewImg(file){
        //判断是否支持FileReader
        if (window.FileReader) {
            var reader = new FileReader();
        } else {
            alert("您的设备不支持图片预览功能,如需该功能请升级您的设备!");
        }
        var preDiv = document.getElementById("wholeImg");
        //获取图片
        if (file.files && file.files[0]){
            var reader = new FileReader(); 
            reader.onload = function(e){  
                var img = document.getElementById("img1");
                img.setAttribute("src",e.target.result);
            }
            reader.readAsDataURL(file.files[0]);
        }
    }

    这样就可以显示图片的内容了

  • 相关阅读:
    使用Eclipse+axis2一步一步发布webservice
    python学习-- django 2.1.7 ajax 请求
    python学习-- Django传递数据给JS
    python学习-- {% csrf_token %}
    python学习-- 两种方式查看自己的Django版本
    python学习-- 默认urls中 Path converter
    Django--------问题:在terminal命令行创建超级用户时入到password时输入为什么没有反应?
    python学习-- 数据库迁移 python manage.py makemigrations 和 python manage.py migrate
    python学习-- Django根据现有数据库,自动生成models模型文件
    python学习-- Django model -class 主键自增问题
  • 原文地址:https://www.cnblogs.com/dealblog/p/7760554.html
Copyright © 2011-2022 走看看