H5 图片上传

1.h5 图片异步上传

(1) 异步上传input触发onchange事件的时候,就把图片上传至服务器。后台可能会返回图片的链接等信息,前台可以把图片信息展示给用户看。

(2) 另一种情况可能需要前台自己重写提交(如下图): 显示图片的时候,添加一个type=‘hidden‘的input框,用来存后台需要提交的东西(后台会返回,只需要用input存起来)

2.h5 图片同步上传

(1) 同步上传。把图片获取,预览出来。然后在提交服务器

(代码)

/**
* tinyImgUpload
* @param ele [string] [生成组件的元素的选择器]
* @param options [Object] [对组件设置的基本参数]
* options具体参数如下
* path 图片上传的地址路径 必需
* onSuccess(res) 文件上传成功后的回调 参数为返回的文本 必需
* onFailure(res) 文件上传失败后的回调 参数为返回的文本 必需
* @return [function] [执行图片上传的函数]
* 调用方法
* tinyImgUpload(‘div‘, options)
*/
function tinyImgUpload(ele, options) {
// 判断容器元素合理性并且添加基础元素
var eleList = document.querySelectorAll(ele);
if(eleList.length == 0){
console.log(‘绑定的元素不存在‘);
return;
}else if(eleList.length>1){
console.log(‘请绑定唯一元素‘);
return;
}else {
eleList[0].innerHTML =‘<div id="img-container" >‘+
‘<div class="img-up-add img-item"> dsafa<span class="img-add-icon">+</span> </div>‘+
‘<input type="file" name="files" id="img-file-input" multiple>‘+
‘</div>‘;
var ele = eleList[0].querySelector(‘#img-container‘);
ele.files = []; // 当前上传的文件数组
}

// 为添加按钮绑定点击事件,设置选择图片的功能
var addBtn = document.querySelector(‘.img-up-add‘);
addBtn.addEventListener(‘click‘,function () {
document.querySelector(‘#img-file-input‘).value = null;
document.querySelector(‘#img-file-input‘).click();
return false;
},false)

// 预览图片
//处理input选择的图片
function handleFileSelect(evt) {
var files = evt.target.files;

for(var i=0, f; f=files[i];i++){
// 过滤掉非图片类型文件
if(!f.type.match(‘image.*‘)){
continue;
}
// 过滤掉重复上传的图片
var tip = false;
for(var j=0; j<(ele.files).length; j++){
if((ele.files)[j].name == f.name){
tip = true;
break;
}
}
if(!tip){
// 图片文件绑定到容器元素上
ele.files.push(f);

var reader = new FileReader();
reader.onload = (function (theFile) {
return function (e) {
var oDiv = document.createElement(‘div‘);
oDiv.className = ‘img-thumb img-item‘;
// 向图片容器里添加元素
oDiv.innerHTML = ‘<img class="thumb-icon" src="‘+e.target.result+‘" />‘+
‘<a href="javscript:;" class="img-remove">x</a>‘

ele.insertBefore(oDiv, addBtn);
};
})(f);

reader.readAsDataURL(f);
}
}
}
document.querySelector(‘#img-file-input‘).addEventListener(‘change‘, handleFileSelect, false);

// 删除图片
function removeImg(evt) {
if(evt.target.className.match(/img-remove/)){
console.log(‘3‘,ele.files);
// 获取删除的节点的索引
function getIndex(ele){

if(ele && ele.nodeType && ele.nodeType == 1) {
var oParent = ele.parentNode;
var oChilds = oParent.children;
for(var i = 0; i < oChilds.length; i++){
if(oChilds[i] == ele)
return i;
}
}else {
return -1;
}
}
// 根据索引删除指定的文件对象
var index = getIndex(evt.target.parentNode);
ele.removeChild(evt.target.parentNode);
if(index < 0){
return;
}else {
ele.files.splice(index, 1);
}
console.log(‘4‘,ele.files);
}
}
ele.addEventListener(‘click‘, removeImg, false);

// 上传图片
function uploadImg() {
console.log(ele.files);

var xhr = new XMLHttpRequest();
var formData = new FormData();

for(var i=0, f; f=ele.files[i]; i++){
formData.append(‘files‘, f);
}

console.log(‘1‘,ele.files);
console.log(‘2‘,formData);

xhr.onreadystatechange = function (e) {
if(xhr.readyState == 4){
if(xhr.status == 200){
options.onSuccess(xhr.responseText);
}else {
options.onFailure(xhr.responseText);
}
}
}

xhr.open(‘POST‘, options.path, true);
xhr.send(formData);

}
return uploadImg;
}

原文地址:https://www.cnblogs.com/huancheng/p/9394928.html

时间: 2024-10-20 19:49:39

H5 图片上传的相关文章

vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理

一.前言 三年.net开发转前端已经四个月了,前端主要用webpack+vue,由于后端转过来的,前端不够系统,希望分享下开发心得与园友一起学习. 图片的上传之前都是用的插件(ajaxupload),或者传统上传图片的方式,各有利弊:插件的问题是依赖jq并且会使系统比较臃肿,还有传统的web开发模式 前后端偶尔在一起及对用户体验要求低,现在公司采用webpack+vue+restfullApi开发模式 前后端完全分离,遵从高内聚,低偶尔的原则,开发人员各司其职,一则提升开发效率(从长期来看,短期

h5图片上传预览

项目中常用到文件上传预览功能,整理一下:如果不想使用 type="file" 的默认样式,可以让其覆盖在一个按钮样式上边,设其透明度为0,或者使用Label关联 html <div> <div class="figure-box" id="figure_box"></div> <input type="file" id="imgUploadBtn" /> &l

h5图片上传简易版(FileReader+FormData+ajax)

一.选择图片(input的file类型) <input type="file" id="inputImg"> 1. input的file类型会渲染为一个按钮和一段文字.点击按钮可打开文件选择窗口:file类型的input会有files属性,保存着文件的相关信息. 2. input.files是一个数组,由传入的file对象组成.每个file对象包含以下属性: lastModified:数值,表示最近一次修改时间的毫秒数: lastModifiedDate

H5拍照、选择图片上传组件核心

背景 前段时间项目重构,改成SSR的项目,但之前用的图片选择上传组件不支持SSR(server-side-render).遂进行了调研,发现很多的工具.但有的太大,有的使用麻烦,有的不满足使用需求.决定自己写一个h5移动端图片上传组件.图片上传是一个比较普遍的需求,PC端还好,移动端就不是特别好做了.下面将过程中一些重点的问题进行简单的记录. 重点 1.关于input 选择功能使用<input>标签实现.属性accept='image/*',:capture表示,可以捕获到系统默认的设备,比如

H5 实现图片上传预览

1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>图片上传预览</title> 7 <style> 8 .check_box{ 9 position: relative; 10 width: 100px; 11 height: 100px; 12 margin: 20px; 13 display: flex

VUE2.0+VUE-Router做一个图片上传预览的组件

之前发了一篇关于自己看待前端组件化的文章,但是由于学习和实践的业务逻辑差异,所以自己练习的一些demo逻辑比较简单,打算用vue重构现在公司做的项目,所以在一些小的功能页面上使用vue来做的,现在写的这个是项目中用户反馈功能而来的,收获还是挺多的. 收获:dom操作=>数据操作       router的使用       组件的使用,具体总结放在尾部. 功能:1.上传图片 2.显示缩略图 3.可以删除 4.可以重新选择文件 先上成品图(主要抽取图片这块),自己在家主要做的功能,样式就不计较了.

angularJS+Ionic移动端图片上传的解决办法

前端开发中经常会碰到图片上传的问题,网上的解决办法很多,可是有些图片上传的插件会有一些附属的插件,因此因为一个图片上传的问题可能额需要引入其他插件到项目中,久而久之项目会不伦不类,有时候插件之间也会有一些冲突,所以我们可以自己写一个图片上传的方法. 今天的demo是帮朋友做的一个移动端微信公众号项目,项目架构采用angular+ionic,因为对dom的操作jQuery会方便很多,但是jQuery比较厚重,所以最后选择用轻量级的zepto来对项目dom进行操作. 项目中有一个需求是上传个人作品,

MVC4中基于bootstrap和HTML5的图片上传Jquery自定义控件

场景:mvc4中上传图片,批量上传,上传前浏览,操作.图片进度条. 解决:自定义jquery控件 没有解决:非图片上传时,会有浏览样式的问题; 解决方案; 1.样式 – bootstrap 的css和图标与metro-ui-css的部分css 2.js 自定义控件 3.后台 mvc4 ------------------------------------------------- 1. [class*=border-color] { border: 2px solid; } .border-c

web 图片上传实现本地预览

前言: 刚成为码农不久,第一次工作中接触图片上传功能,说到图片上传,大多数程序员可能都是先上传服务器,再获取路径.如果用户多长更改图片,服务器会产生许多垃圾文件.怎样用js实现本地预览.今天特意抽空百度研究了一下. 在说上传之前先说说如何替换or美化浏览器自带的简陋上传按钮(自定义自己的上传按钮 如:img): 1.将自定义上传按钮上方添加 input file 框,实现input实现透明处理. 2.对自定义上传按钮添加事件.隐藏真正input框.用事件来触发: function imgBtn(