移动端h5实现拍照上传图片并预览&webuploader
.移动端实现图片上传并预览,用到h5的input的file属性及filereader对象;经测除了android上不支持多图片上传,其他基本ok实用;
一:先说一下单张图片上传(先上代码):
html结构(含多张图片容器div):
- <div class="fileBtn">
- <p>点击添加图片</p>
- <input id="fileBtn" type="file" onchange="upload();" accept="image/*" capture="camera" multiple="multiple"/>
- <!--单张图片容器-->
- <img src="" id="img"/>
- </div>
- <!--多张图片容器-->
- <div class="img-box">
- </div>
css样式(由于默认file样式实在不好看,自定义透明覆盖改变了样式ps含多张图片容器div):
- <style type="text/css">
- #fileBtn{width: 100px;height: 100px; position: absolute;display: block;top: 0;left: 0;opacity: 0;}
- .fileBtn{width: 100px;height: 100px;border: 2px dashed lightskyblue;text-align: center;position: relative;left: 50px;top: 50px;}
- .fileBtn p{line-height: 60px;}
- #img{width: 100px;height: 100px;position: absolute;top: 0;left: 0;z-index: 10;display: none;}
- .img{width: 100px;height: 100px;}
- .img-box{margin-top: 80px;}
- </style>
js代码:
- //单张图片上传
- function upload(){
- var $c = document.querySelector("#fileBtn");//上传出发按钮
- var $d = document.querySelector("#img");//图片容器
- var file = $c.files[0];//获取file对象单张
- var reader = new FileReader();//创建filereader对象
- reader.readAsDataURL(file);//转换数据
- reader.onload = function(e){//加载ok时触发的事件
- console.log(file);
- $d.setAttribute("src", e.target.result);//给图片地址,显示缩略图
- $d.style.display="block";//样式显示
- };
- };
效果图(pc端截图,没截移动端的,参考下就好;移动端也是ok的):
二:多张图片上传(android不支持):
只需将在方法里改变将file全部获取并遍历;(这里还可限制上传数量就没写了;)
- //多张图片
- function uploadm(){
- var $c = document.querySelector("#fileBtn");//上传出发按钮
- var $d = document.querySelector(".img-box");//图片容器
- var file = $c.files; //获取file对象,并进行遍历
- console.log(file.length);
- for(var i=0;i<file.length;i++){
- var reader = new FileReader();
- reader.readAsDataURL(file[i]);
- reader.onload = function(e){
- var oImg=new Image();
- oImg.setAttribute("src", e.target.result);
- oImg.setAttribute("class",'img');
- $d.appendChild(oImg);
- };
- }
- };
然后注意把input的multiple属性加上;
二:使用webuploader(图片上传神器):
ps:虽然是神器,也有缺陷的,跟h5的一样;
直接上(模拟头像图片上传功能)代码了:
首先引入插件(含Uploader.swf文件):
- <link rel="stylesheet" type="text/css" href="css/webuploader.css"/>
- <script type="text/javascript" src="js/webuploader.min.js"></script>
html代码:
- <div id="uploader-demo">
- <!--用来存放item-->
- <div id="fileList" class="uploader-list head-top">
- <img src="img/zl-add.png" id="add"/>
- </div>
- <div id="filePicker" style="position: absolute;left: 3.8rem;top: 2rem;opacity: 0;">上传图片</div>
- </div>
css:
- .head-top{width: 3rem;height: 3rem;border-radius: 1.5rem;margin: 0 auto;margin-top: 1rem;background: #e3e3e3;}
- #fileList img{width: 3rem;height: 3rem;border-radius: 1.5rem;}
- #fileList .info{display: none;}
- #fileList .error{display: none;}
js:
- // 初始化Web Uploader
- var uploader = WebUploader.create({
- // 选完文件后,是否自动上传。
- auto: true,
- // swf文件路径
- swf: 'js/Uploader.swf',
- // 文件接收服务端。
- server: 'http://ld-kj.cn/test/zlsfsb/controls/fileupload.php',
- // 选择文件的按钮。可选。
- // 内部根据当前运行是创建,可能是input元素,也可能是flash.
- pick: {
- id:'#filePicker',
- multiple:false
- },
- // 只允许选择图片文件。
- accept: {
- title: 'Images',
- extensions: 'gif,jpg,jpeg,bmp,png',
- mimeTypes: 'image/*'
- },
- method:"POST"
- });
- var thumbnailWidth=100;
- var thumbnailHeight=100;
- var imageArray = [];
- // 当有文件添加进来的时候
- uploader.on( 'fileQueued', function( file ) {
- $("#add").remove();
- imageArray.push(file);
- console.log(imageArray);
- var $list = $("#fileList");
- $list.html("");
- var $li = $(
- '<div id="' + imageArray[imageArray.length-1].id + '" class="file-item thumbnail">' +
- '<img>' +
- '<div class="info">' + imageArray[imageArray.length-1].name + '</div>' +
- '</div>'
- ),
- $img = $li.find('img');
- // $list为容器jQuery实例
- $list.append( $li );
- // 创建缩略图
- // 如果为非图片文件,可以不用调用此方法。
- // thumbnailWidth x thumbnailHeight 为 100 x 100
- uploader.makeThumb( file, function( error, src ) {
- if ( error ) {
- $img.replaceWith('<span>不能预览</span>');
- return;
- }
- console.log(src);
- $img.attr( 'src', src );
- }, thumbnailWidth, thumbnailHeight );
- });
- // 文件上传过程中创建进度条实时显示。
- uploader.on( 'uploadProgress', function( file, percentage ) {
- var $li = $( '#'+file.id ),
- $percent = $li.find('.progress span');
- // 避免重复创建
- if ( !$percent.length ) {
- $percent = $('<p class="progress"><span></span></p>')
- .appendTo( $li )
- .find('span');
- }
- $percent.css( 'width', percentage * 100 + '%' );
- });
- // 文件上传成功,给item添加成功class, 用样式标记上传成功。
- uploader.on( 'uploadSuccess', function( file ,res) {
- $( '#'+file.id ).addClass('upload-state-done');
- console.log(res);
- imagename = res.image;//res为后台返回数据,此处为经后台编码后返回的图像储存数据
- $("#valInput").val(res.image);
- });
- // 文件上传失败,显示上传出错。
- uploader.on( 'uploadError', function( file ) {
- var $li = $( '#'+file.id ),
- $error = $li.find('div.error');
- // 避免重复创建
- if ( !$error.length ) {
- $error = $('<div class="error"></div>').appendTo( $li );
- }
- $error.text('上传失败');
- });
- // 完成上传完了,成功或者失败,先删除进度条。
- uploader.on( 'uploadComplete', function( file ) {
- $( '#'+file.id ).find('.progress').remove();
- });
实现的效果为:
更多方法属性可参考:http://www.cnblogs.com/tugenhua0707/p/4605593.html
欢迎纠正和更好方法;
移动端h5实现拍照上传图片并预览&webuploader的更多相关文章
- js上传图片及预览功能
详细内容请点击 参考了网上一些人代码写了一个上传图片及时预览的功能 <img id="imgTag" style="height: 100px;" alt ...
- jquery解决file上传图片+图片预览
js解决file上传图片+图片预览 demo案例中代码为js原生控制,可以根据项目的需求修改为jquery操作 <!DOCTYPE html><html lang="en& ...
- js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小
方法一: js: /** * 上传图片本地预览方法 * @param {Object} fileObj 上传文件file的id元素 fresh-fileToUpload * ...
- vue <input type="file">上传图片、预览、删除
使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张 参数名 类型 说明 fileTypes Array 文件类型, 默认 ...
- angular +H5 上传图片 与预览图片
//index.html <form class="form-horizontal"> <div class="panel panel-default& ...
- nodejs实现本地上传图片并预览功能(express4.0+)
Express为:4.13.1 multyparty: 4.1.2 代码主要实现本地图片上传到nodejs服务器的文件下,通过取图片路径进行图片预览 写在前面:计划实现图片上传预览功能,但是本地图片 ...
- mvc实现上传图片(上传和预览)webuploader
笔者看到mvc最近比较流行,而很多使用一些比较旧的的方法上传图片,再次安利一下百度的webuploader控件吧 webuploader第一步要先下载一些插件这点可以在webuploader官网上下载 ...
- (JavaScript)实现上传图片实时预览和(文件)大小判断
唉,为什么我一个做大数据和后端的要为前端耗尽心力啊??!! 昨天在做一个网页时遇到了一个问题,有一处需要插入图片,我原本的想法是获取到上传文件的URL,然后动态插入img标签,设置src为图片的URL ...
- H5 实现图片上传预览
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
随机推荐
- (原创)确保JAVA线程安全的4种常用方法
在Java中可以有很多方法来保证线程安全,比如使用同步方法.同步块,使用原子类(atomic concurrent classes),实现并发锁,使用volatile关键字,使用不变类和线程安全类. ...
- iOS-AFNetworking参数和多文件同时上传【多文件上传】
1. 前言 在项目开发中,我们经常需要上传文件,例如:上传图片,上传各种文件,而有时也需要将参数和多个文件一起上传,不知道大家的项目中遇到了没有,我在最近的项目中,就需要这样的一个功能:同时上传参数. ...
- 剑指offer三十一之连数中1出现的次数(从1到n整数中1出现的次数
一.题目 求出1~13的整数中1出现的次数,并算出100~1300的整数中1出现的次数?为此他特别数了一下1~13中包含1的数字有1.10.11.12.13因此共出现6次,但是对于后面问题他就没辙了. ...
- python网络爬虫技术图谱
- python strip()函数的用法
函数原型 声明:s为字符串,rm为要删除的字符序列 s.strip(rm) 删除s字符串中开头.结尾处,位于 rm删除序列的字符 s.lstrip(rm) 删除s字符串中 ...
- windows本地调试安装hadoop(idea) : ERROR util.Shell: Failed to locate the winutils binary in the hadoop binary path
1,本地安装hadoop https://mirrors.tuna.tsinghua.edu.cn/apache/hadoop/common/ 下载hadoop对应版本 (我本意是想下载hadoop ...
- 【数组】Product of Array Except Self
题目: iven an array of n integers where n > 1, nums, return an array output such that output[i] is ...
- SQL中存储过程和函数的区别
转:https://www.cnblogs.com/jacketlin/p/7874009.html 本质上没区别.只是函数有如:只能返回一个变量的限制.而存储过程可以返回多个. 而函数是可以嵌入在s ...
- Python 基础语法——数字和表达式(包含数学上的一些函数)
>>> 2+2 4 >>> 1/2 0 >>> 1.0/2.0 0.5 >>> 1/2.0 0.5 >>> 1 ...
- Python -- 网络编程 -- 抓取网页图片 -- 图虫网
字符串(str)编码成字节码(bytes),字节码解码为字符串 获取当前环境编码:sys.stdin.encoding url编码urllib.parse.quote() url解码urllib.pa ...