html代码如下:
<input id="fileup" type="file" accept="image/*" capture="camera" >

  js代码:

  $('#fileup').change(function (e) {
/*var val= $('#upimg').valueOf()*/
var file = $('#fileup')[0].files[0];
//创建读取文件的对象
var reader = new FileReader();
//创建文件读取相关的变量
var imgFile;
//为文件读取成功设置事件
reader.onload = function (e) {
imgFile = e.target.result; var index= layer.open({
type: 2
,content: '正在上传...',
shadeClose:false
});//提示正在上传
$.ajax({
url: '',
type: "POST",
data: {imgsrc: imgFile},
success: function (data) {
if(data.success==true) {
layer.close(index);//关闭提示框
$(".up img").attr("src", data.imageUrl);
}
}
}); };

这里我们会踩到一些坑:

android手机微信内置浏览器上传时,会出现change事件无效,所以在这里特别提醒下在input内要加上capture="camera";

这里我是直接获取上传图片的base64码(e.target.result),由后端处理返回数据。

大家也可以用创建dataform来提交数据:

  var fd = new FormData();
fd.append("upload", 1);
fd.append("upfile", $(".fileup")[0].files[0]);

  FormData包含append方法可直接调用

接下来是第三种方法:

<form  action='XXXXXXXXXXXX' method='post' enctype='multipart/form-data><input type="file" accept="image/*" capture="camera"> </form>   

 通过原生表单提交的方式来进行上传

enctype属性规定在发送到服务器之前应该如何对表单数据进行编码,默认的编码是:”application/x-www-form-urlencoded“。对于普通数据是挺适用的,但是,对于文件,科科,就不能乱编码了,该什么就是什么,只能使用multipart/form-data作为enctype属性值。

下面是对FileReader作一个补充:

  • readAsDataURL() 方法。//将文件读取为base64的格式,也就是可以当成图片的src
  • result 属性 //将读取的数据保存在result里。
  • progress 事件 //定时触发,来获取当前已上传文件的大小,如进度条
  • loade 事件 //文件上传完成时触发
  • loadend 事件 //文件上传完成时(不管成功、失败)触发
  •   var reader = new FileReader(); //新建FileReader对象
    reader.readAsDataURL(file); //读取为base64
    //以下代码可以删除
    reader.onloadstart = function(){
    ... //开始读取
    };
    reader.onprogress = function(e){
    //这个是定时触发的事件,文件较大的时候较明显
    var p = '已完成:' + Math.round(e.loaded / e.total * 100) + '%' ;//上传完成进度 };
    reader.onabort = function(){
    ... //用作取消上传功能
    };
    reader.onerror = function(){
    console.log('error'); //文件读取出错的时候触发
    };
    reader.onload = function(){
    console.log('load complete'); //完成
    };

      

input file 上传图片问题的更多相关文章

  1. JQuery input file 上传图片

    表单元素file设置隐藏,通过其他元素打开: .imgfile为input file $(".ul").click(function () {return $(".img ...

  2. html5手机 input file 上传图片 调用API

    <input type="file" accept="video/*;capture=camcorder"> <input type=&quo ...

  3. (转)html中使用表单和input file上传图片

    本文转载自:http://hi.baidu.com/love_1210/item/120e452b42b2a854c38d59eb 客户端代码: <form name="form1&q ...

  4. input file上传图片预览,非插件

    Input标签 <input type="file" name="pic" onchange="changepic(this)" mu ...

  5. vue <input type="file">上传图片、预览、删除

    使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张 参数名 类型 说明 fileTypes Array 文件类型, 默认 ...

  6. 一、H5(移动端)前端使用input type=file 上传图片,调用相机和相册

    一.H5(移动端)前端使用input type=file 上传图片,调用相机和相册

  7. HTML中上传与读取图片或文件(input file)----在路上(25)

    input file相关知识简例 在此介绍的input file相关知识为: 上传照片及文件,其中包括单次上传.批量上传.删除照片.增加照片.读取图片.对上传的图片或文件的判断,比如限制图片的张数.限 ...

  8. 动态input file多文件上传到后台没反应的解决方法!!!

    其实我也不太清除具体是什么原因,但是后面就可以了!!! 我用的是springMVC 自带的文件上传 1.首先肯定是要有springMVC上传文件的相关配置! 2.前端 这是动态input file上传 ...

  9. h5 input file ajax实现文件上传

    <input type="file" accept="image/*" height="0" class="file_inp ...

随机推荐

  1. 开涛spring3(6.9) - AOP 之 6.9 代理机制

    Spring AOP通过代理模式实现,目前支持两种代理:JDK动态代理.CGLIB代理来创建AOP代理,Spring建议优先使用JDK动态代理. JDK动态代理:使用java.lang.reflect ...

  2. Microsoft Azure IoTHub Serials 1 - 使用Android设备与Azure IoTHub进行交互

    Azure IoTHub的目标是为物联网的应用场景提供方便的设备接入,完成消息的发送和接收(C2D和D2C).经过持续不断的努力,目前Azure IoTHub已经支持多种操作系统设备的接入,包括And ...

  3. Java(14)继承

    1.继承(extends) 1.1 继承:遗传 1.2 语法 public class 子类 extends 父类{ } public class Dog extends Pet{ } public ...

  4. mysql主键约束和唯一性约束

    主键约束和唯一性约束都是索引,它们的区别是: 主键字段可以确保唯一性,但主键字段不能为NULL. 唯一性约束可以确保唯一性,但唯一性约束的字段可以为NULL 唯一性约束对含有NULL的记录不起作用,即 ...

  5. SQL之trigger(触发器)

    先来看一小段程序 有如下三张表: 帐户(编号,姓名,余额,建立日期,储蓄所编号) 储蓄所(编号,名称,地址,人数,所属城市) 借贷(帐户,借贷类型,金额,日期) create trigger tri_ ...

  6. C# 禁止ALT+F4(钩子)

    1. Windows Forms中禁用窗体的关闭按钮  添加必要的命名空间: using System.Runtime.InteropServices;   添加必要的常数和API函数的引用 priv ...

  7. sql 注入命令大全

    1.判断有无注入点 ; and 1=1 and 1=2 2.猜表一般的表的名称无非是admin adminuser user pass password 等.. and 0<>(selec ...

  8. Android 的 SDK Manager 无法启动 闪退解决方法

    [故障描述] 做 Android 开发就要下载 Android SDK,其中的 SDK Manager.exe 无法启动,一闪而过. 尝试重装 JDK.重新从官网下载 Android SDK.添加环境 ...

  9. scrapy抓取淘宝女郎

    scrapy抓取淘宝女郎 准备工作 首先在淘宝女郎的首页这里查看,当然想要爬取更多的话,当然这里要查看翻页的url,不过这操蛋的地方就是这里的翻页是使用javascript加载的,这个就有点尴尬了,找 ...

  10. centos6.7下安装mysql5.6.22同时解决中文乱码问题

    1.下载 http://dev.mysql.com/downloads/mysql/ 或者使用wget下载: wget http://dev.mysql.com/get/Downloads/MySQL ...