H5移动开发Ajax上传多张Base64格式图片到服务器

 更新时间:2017年05月18日 14:15:59   作者:涟动下渔舟  
这篇文章主要为大家详细介绍了H5移动开发Ajax上传多张Base64格式图片到服务器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

废话不多说,直接看代码吧

1、上传组件

 <div class="imgbox">
   <img class="goodsimg" src="../../assets/addimg.png">
   <input id="file" type="file" class="fileupload" accept="image/*" multiple capture="camera" @change="viewimg()"/>
 </div>

2、展示添加上的图片

viewimg($event) {
   //获取当前的input标签
   var currentObj = event.currentTarget; 
   //找到要预览的图片img标签,亦可动态生成
   var img = currentObj.parentNode.children[0]; 
   setImagePreview(currentObj, img);

   function setImagePreview(docObj, imgObjPreview) {
     if (docObj.files && docObj.files[0]) {
        imgObjPreview.style.display = 'block';
        imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
    }
  }
}

3、获取图片并上传到服务器

//单张图片上传
var inputs = $("input.fileupload");
for (var i = 0; i < inputs.length; i++) {
  //图片转base64上传
  var file = inputs[i].files;
  if (file[0]) {
    var reader = new FileReader();
    reader.readAsDataURL(file[0]);
    reader.onload = function(e) {
   var event = this;
   console.log(event.result);
      $.ajax({
        type: 'POST',
        url: 'http://10.145.0.05/goods/addGoodsBase64',
        dataType: "json",
        data: {
          "base64": event.result,
        },
        success: function(data) {
          console.log(data);
        }
      });
    }
  }
} 


好了,就是这个过程,接下来的就交给后端的同学处理了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • pushState实现Ajax无刷新页面切换

    pushState实现Ajax无刷新页面切换

    这篇文章主要介绍了pushState实现Ajax无刷新页面切换的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • Ajax与mysql数据交互实现留言板功能

    Ajax与mysql数据交互实现留言板功能

    最近自己做了一个小demo,实现了Ajax与MySQL的数据交互,js部分用的是jq,后台用的是PHP,数据库是mysql,下面通过本文给大家详细介绍下
    2016-12-12
  • ajax处理返回的json格式数据方法

    ajax处理返回的json格式数据方法

    今天小编就为大家分享一篇ajax处理返回的json格式数据方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Ajax异步请求JSon数据(图文详解)

    Ajax异步请求JSon数据(图文详解)

    在编程过程中使用ajax调用数据的时候,难免要进行逻辑的处理,接受的数据也变的复杂比如数组类型的数据,这时候就需要使用JSON数据类型进行处理,通过本篇文章给大家介绍Ajax异步请求json数据,需要的朋友可以参考下本文
    2015-09-09
  • 双层ajax嵌套(可多层)用法实例

    双层ajax嵌套(可多层)用法实例

    这篇文章主要介绍了双层ajax嵌套(可多层)用法,实例分析了Ajax嵌套的相关使用技巧,可实现多层嵌套的功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • JQuery中$.ajax()方法参数详解

    JQuery中$.ajax()方法参数详解

    AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。本文跟大家介绍JQuery中$.ajax()方法参数详解,小伙伴们一起学习吧
    2015-10-10
  • ajax读取properties资源文件数据的方法

    ajax读取properties资源文件数据的方法

    这篇文章主要介绍了ajax读取properties资源文件数据的方法,实例分析了基于Ajax实现读取properties资源文件数据的相关技巧,需要的朋友可以参考下
    2015-06-06
  • AJAX简历系统附js文件

    AJAX简历系统附js文件

    AJAX简历系统附js文件...
    2007-08-08
  • 利用ajax实现简单的注册验证局部刷新实例

    利用ajax实现简单的注册验证局部刷新实例

    ajax的工作原理想必大家都有所了解吧,不懂的可以看看本文。下面是注册验证案例register。php是注册页面。registerProcess.php用于接收数据并返回数据
    2013-10-10
  • ajax实现无刷新上传文件功能

    ajax实现无刷新上传文件功能

    这篇文章主要为大家详细介绍了ajax实现无刷新上传文件功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08

最新评论