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

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

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

时间: 2017-05-17

php+ajax实现图片文件上传功能实例

目前常用的异步文件上传功能有几种,比较多见的如使用iframe框架形式,ajax功能效果,以及flash+php功能,下面介绍ajax与iframe实现异步文件上传的功能的例子. 方法一,利用jquery ajaxfileupload.js实现文件上传 其实就是实现无刷新式的文件上传.可采用IFRAME文件上传原理.实际上在用PHP上传文件时...只能用$_FILES形式,但是若我们只是单一的用JS方式取其ID,如<input id='img' type='file'>..document.g

使用base64对图片的二进制进行编码并用ajax进行显示

使用base64对图片的二进制进行编码并用ajax进行显示 有时候我们需要动态的将图片的二进制在页面上进行显示,如我们需要弄一个验证码的功能,那么如果我们的验证码的图片在后台得到的是该图片的二进制,那么当我们需要在页面上点击一个按钮利用ajax进行切换的时候,如果在后台直接返回的是该图片的二进制,那么该图片是无法进行显示的. 直接返回字节流给img标签的src是可以的,如<img src="servlet/CheckCode">,但在之后进行切换的时候使用ajax请求,如果

借助FileReader实现将文件编码为Base64后通过AJAX上传

使用AJAX是无法直接上传文件的,一般都是新建个iframe在它里面完成表单提交的过程以达到异步上传文件的效果. 如此做可以达到比较好的浏览器兼容性,不过代码量会比较大,即使是使用了文件上传插件,例如plupload. 如何能达到灵活的程度呢,能像普通的AJAX提交表单数据那样将文件看成是普通表单参数来对待就好了. 灵光一闪,利用javascript的FileReader对象将文件编码成base64再传服务器不就行了么~ 开始动手,丰衣足食. 前端对文件进行base64编码并通过ajax向服务器

JavaScript将base64图片转换成formData并通过AJAX提交的实现方法

之前为了拍摄照片使用了webcam相关的插件,其拍摄后得到的是base64格式的图片,直接显示没问题,在src中直接指定就可以了,但是要上传到server时问题就来了,server端接收的是标准的文件,也就是html form中type="file"的形式.想要沿用这个接口不更改server端代码,于是尝试将base64直接转换成标准的fomeData并通过AJAX提交. 第一步,将base64转换成二进制图片(Blob) 主要思路是整理一下base64的前面几个字符,预处理以后转换成

自己动手打造ajax图片上传(网上没有的)

今天笔者需要一款图片上传插件,但是网上没有提供一款符合自己需求且好用的.于是就自己动手写了一个. 方法1,仅使用jquery代码,不用第三方插件.代码如下 <p> <label>上传图片</label> <input class="ke-input-text" type="text" id="url" value="" readonly="readonly" /&g

php ajax无刷新上传图片实例代码

AJAX 客户端页面代码: index.html 复制代码 代码如下: <html> <body> <h1>Ajax file upload sample</h1><br/><input id="uplaod" name="btn_send" type="button" value="上传测试"/> <div id=result></di

jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码

(jsp需要引入 :jquery-1.9.0.js.jquery.form.js ) ,jsp页面使用的是bootstrap制作的,看不懂的标签不用管,form表单大同小异.代码比较简陋,只是为了演示使用ajaxSubmit异步上传图片及保存数据,请海含! (参考文献:http://www.jb51.net/shouce/jquery/jquery_api/Plugins/Form/ajaxSubmit.html) 一:web (add.jsp) 复制代码 代码如下: <%@page impor

PHP+jQuery+Ajax实现多图片上传效果

今天我给大家分享的是在不刷新页面的前提下,使用PHP+jQuery+Ajax实现多图片上传的效果.用户只需要点击选择要上传的图片,然后图片自动上传到服务器上并展示在页面上. HTML 我们在页面上放置一个form表单,使用post提交到后台php处理程序upload.php,注意enctype属性设置要支持文件上传.#preview用来显示上传完毕后的图片.关于css样式设置本文不加说明,请参照下载包的源码. 复制代码 代码如下: <form id="imageform" met

Ajax上传实现根据服务器端返回数据进行js处理的方法

本文实例讲述了Ajax上传实现根据服务器端返回数据进行js处理的方法.分享给大家供大家参考.具体如下: Ajax上传说白了还是使用form表单提交,在当前页面加一个iframe,将提交的内容跳转到iframe中,造成一种页面无刷新的错觉. 以前也做过上传,基本是是使用commons-fileupload组件,基本的步骤是使用servlet处理完上传之后,使用PrintWrite的对象实例输出显示内容,可以是直接输出内容,也可以是输出script进行操作如 复制代码 代码如下: response.

Jquery ajaxsubmit上传图片实现代码

而且未建立统一上传函数.于是将代码改造了.心想来个ajax异步上传图片吧,这技术应该很老套了.于是直接打开强大的cnblogs轻松的找到了 这篇文章 直接依葫芦画瓢,将该作者的劳动成果直接"拿来主义了".很快就把代码全改造了.可是当我把程序发布到服务器上的时问题来了.上传文件失效了!汗- 都是偷懒造成的恶果.继续打开先前参考的那篇文章.原来作者解释了只能在本地使用而不能发布到服务器上.心想我难道还得用 iframe + http post 这个 郁闷的方式么?? 于是不甘心的我打开了更

jquery 批量上传图片实现代码

前台: upload.htm 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="

jQuery ajaxSubmit 实现ajax提交表单局部刷新

AJAX简介 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. 需要引入 : jquery-form.js 使用说明: Java代码 $(document).ready(function() { var options = { target: '#mydiv', // 需要刷新的区域

jQuery fadeOut 异步实例代码详解

定义和用法 fadeOut() 方法逐渐改变被选元素的不透明度,从可见到隐藏(褪色效果). 注释:隐藏的元素不会被完全显示(不再影响页面的布局). 提示:该方法通常与 fadeIn() 方法一起使用. 语法 $(selector).fadeOut(speed,easing,callback) 1. 概述 jquery实现动画效果的函数使用起来很方便,不过动画执行是异步的,所以要把自定义的操作放在回调函数里. 2. example <html> <body> <table id

jQuery自定义数值抽奖活动代码

本文实例为大家分享了jquery输入数字随机抽奖特效代码,供大家参考,具体内容如下 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery自定义数值抽奖活动代码 - 何问起</title><base target="_blank" /> <script type="text/ja

如何解决JQuery ajaxSubmit提交中文乱码

一般人使用是 jQuery(form).ajaxSubmit({ url: "ajaxsub.aspx?abc=test", type: "post", dataType: "json", success: data }); 分析:JQuery的AJAX提交,会将要提交的数据进行编码,使用encodeURIComponent在js中处理数据.因此,无论是 Firefox或者IE,提交的数据都是一致的,都是UTF-8编码后的数据. 查看Header

jQuery遍历Form示例代码

jQuery 遍历 Form,代码如下 复制代码 代码如下: <script type="text/javascript"> // 取得 id 为form1 的 form 的所有输入变量 values = $("#form1").serializeArray(); var values, index; for (index = 0; index < values.length; ++index) { if (values[index].name =

jquery css 选择器演示代码

效果如图所示:核心代码: 复制代码 代码如下: <script type="text/javascript"> $('#one').css("background","#fff"); $('div').css("background","#fff"); $('body div').css("background","#bbffaa");//改变body内所

全面解析DOM操作和jQuery实现选项移动操作代码分享

DOM: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-"> <title>DOM选项移动操作</title> <style> select { width: px; height: px; } div { display: inline-block; width: px } </style> <

jquery实现滑动特效代码

在项目中,有需求要使用jquery实现滑动效果,于是把相关内容整理如下,下文介绍了很详细,有文字说明和代码分析,需要的朋友可以来学习下. 实现方式一:  .slideUp([duration][,complete])--目标元素向上滑入隐藏: .slideDown([duration][,complete])--目标元素向下滑出显示: .slideToggle([duration][,complete])--目标元素隐藏则向下滑出显示,否则向上滑入隐藏: 注:duration为方法执行的时间区间