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);
        }
      });
    }
  }
} 


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

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

相关文章

  • Ajax返回的json遍历取值并显示到前台的方法

    Ajax返回的json遍历取值并显示到前台的方法

    今天小编就为大家分享一篇Ajax返回的json遍历取值并显示到前台的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 通过history解决ajax不支持前进/后退/刷新的问题

    通过history解决ajax不支持前进/后退/刷新的问题

    下面小编就为大家带来一篇通过history解决ajax不支持前进/后退/刷新的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • AJAX对服务器返回XML的处理方法

    AJAX对服务器返回XML的处理方法

    这篇文章主要介绍了AJAX对服务器返回XML的处理方法,实例分析了Ajax的实现技巧及针对XML返回数据的处理方法,需要的朋友可以参考下
    2015-03-03
  • Ajax报错400的参考解决办法

    Ajax报错400的参考解决办法

    今天小编就为大家分享一篇关于Ajax报错400的参考解决办法,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2018-10-10
  • 基于h5 ajax实现手机定位(demo)

    基于h5 ajax实现手机定位(demo)

    最近没有项目做,正有朋友请帮忙实现手机定位功能,实现方法有很多种,我是用h5和ajax实现的手机定位,只是个demo,后续还要继续完善的,在此分享给大家,需要的朋友可以参考下
    2015-09-09
  • ajax的 IE cache 相关问题解决

    ajax的 IE cache 相关问题解决

    运用Ajax做了一个名字检验,第一次是有效的,但是提交过后,再检验一次,结果就不对了,是由于IE的cache的原因,接下来介绍下详细的解决方法,感性的朋友可以参考下哈
    2013-04-04
  • Ajax 表单验证 实现代码

    Ajax 表单验证 实现代码

    最近做了一个项目中的登录注册模块,大部分功能从一个网站里扣出来的,部分功能自己修改,自认为还是有点人性化的
    2009-05-05
  • AJAX跨域请求之JSONP获取JSON数据

    AJAX跨域请求之JSONP获取JSON数据

    JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。
    2015-09-09
  • 用ajax实现在单击事件下加载一个DIV层的脚本

    用ajax实现在单击事件下加载一个DIV层的脚本

    用ajax实现在单击事件下加载一个DIV层的脚本...
    2007-11-11
  • Ajax实现省市区三级级联(数据来自mysql数据库)

    Ajax实现省市区三级级联(数据来自mysql数据库)

    这篇文章主要为大家详细介绍了Ajax实现省市区三级级联,数据来自mysql数据库,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09

最新评论