移动端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 ...