原生js上传图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>测测测</title>
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body> <!--实例一-->
<div style="width:200px; height:210px; border:1px solid red;" id="show">
<div class="mark"></div>
</div>
<br>
<input type="file" value="上传文件" onchange="getImgURL(this)"> <!--实例二-->
<input id="input-file" class="upload" type="file" value="">
<img src="" alt=""/>
<!--实例三-->
<style>
.img{opacity:0;}
.imgs{border:1px solid #78C3F3;background: #AADFFD;color: #1E88C7;border-radius: 4px;text-align:center;cursor: pointer;
padding:10px;}
</style>
<ul class="iconlist">
<li>
<div class="imgs" onclick="document.getElementById('img_1').click()">选择图片</div>
<input type="file" class="img" name="img[]" id="img_1" accept="image/*" onchange="l(this)"/>
</li>
</ul> <ul class="iconlist">
<li><div width="225px"><img src="" width="225px" id="1"/></div></li>
</ul>
</body> <script>
//实例一JS
var imgurl = ""; function getImgURL(node) {
var imgURL = "";
try{
var file = null;
if(node.files && node.files[0] ){
file = node.files[0];
}else if(node.files && node.files.item(0)) {
file = node.files.item(0);
}
//Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径
try{
//Firefox7.0
imgURL = file.getAsDataURL();
//alert("//Firefox7.0"+imgRUL);
}catch(e){
//Firefox8.0以上
imgRUL = window.URL.createObjectURL(file);
//alert("//Firefox8.0以上"+imgRUL);
}
}catch(e){ //这里不知道怎么处理了，如果是遨游的话会报这个异常
//支持html5的浏览器,比如高版本的firefox、chrome、ie10
if (node.files && node.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
imgURL = e.target.result;
};
reader.readAsDataURL(node.files[0]);
}
}
//imgurl = imgURL;
creatImg(imgRUL);
return imgURL;
} function creatImg(imgRUL){ //根据指定URL创建一个Img对象
var textHtml = "<img src='"+imgRUL+"'/>";
$(".mark").html(textHtml);
} //实例二JS
$(function(){
$('.upload').change(function(){
var oFReader = new FileReader();
var file = document.getElementById('input-file').files[0];
oFReader.readAsDataURL(file);
oFReader.onloadend = function(oFRevent){
var src = oFRevent.target.result;
$('img').attr('src',src);
}
})
})
//实例三JS
<script>
function l(evn){
var name = event.target.files[0].name;//获取上传的文件名
var divObj= $(evn).prev() //获取div的DOM对象
$(divObj).html(name) //插入文件名
var id = $(evn).attr('id');//获取id
var num = id.substr(4,1)
var file = event.target.files[0];
if (window.FileReader) {
var reader = new FileReader();
reader.readAsDataURL(file);
//监听文件读取结束后事件
reader.onloadend = function (e) {
console.log("路径地址:"+e.target.result)
$("#"+num).attr("src",e.target.result); //e.target.result就是最后的路径地址
};
}
}
</script>
</script>
</html>
原生js上传图片的更多相关文章
- 原生 js 上传图片
js <!doctype html> <html> <head> <meta charset="utf-8"> <title& ...
- 原生js上传图片遇到的坑（axios封装）
后台给我写了一个上传图片的接口,自己用form表单测试成功 接口可以正常跳转 测试的代码: <!doctype html> <html lang="en"> ...
- 原生js上传图片时的预览
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- 原生js复制粘贴上传图片前后台代码，兼容firebox，chrome， ie11，亲测有效
需求:粘贴上传图片,截图工具,右键粘贴,或者ctrl+v粘贴 方法1:可直接套用富文本框的图片上传功能,完成复制粘贴 缺点:麻烦,样式难控制 方法2:用原生js完成,以下案例基于此,样式请自己动手调整 ...
- 纯原生js移动端图片压缩上传插件
前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于 ...
- 原生js开发，无依赖、轻量级的现代浏览器图片懒加载插件，适合在移动端开发使用
优势 1.原生js开发,不依赖任何框架或库 2.支持将各种宽高不一致的图片,自动剪切成默认图片的宽高 比如说你的默认图片是一张正方形的图片,则各种宽度高度不一样的图片,自动剪切成正方形. 完美解决移动 ...
- 原生js实现图片预览并上传
最近主导的PC客户端网站重构工程告一段落,下一阶段开始给公司APP开发H5页面,技术栈是react.最近碰到一个需求:需要在H5页面上添加身份证照片,预览并上传.因为要兼容安卓4.4以下版本的手机,所 ...
- 原生JS实现拼图游戏
最近无聊,练练原生JS:实现拼图游戏.两种玩法:第一种是单击元素进行交换位置:第二种是拖拽元素进行位置交换.首先需要上传图片并进行回显(需要用到FileReader):下面是部分截图: 可以自行设置切 ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
随机推荐
- 【转】python字符串/元组/列表/字典互转
#-*-coding:utf-8-*- #1.字典 dict = {'name': 'Zara', 'age': 7, 'class': 'First'} #字典转为字符串,返回:<type ' ...
- UI：单例的写法
单例设计模式 参考 UIApplication sharedApplocation 详细解释 :参考 通讯录的helper 类的读取本地plist 文件的时候,使用的单例单例的要点有三个:一个类只能有 ...
- [BZOJ1381]Knights
Description 在一个N*N的棋盘上,有些小方格不能放骑士,棋盘上有若干骑士,任一个骑士不在其它骑士的攻击范围内,请输出最多可以放多少个骑士. 骑士攻击的点如中国象棋中的马,可以攻击8个点. ...
- hdu 1863 畅通工程(Kruskal+并查集)
畅通工程 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...
- 自定义View(11)**在onDraw中使用矩阵Matrix
1.代码示例 1.1 效果 原图 : 其尺寸为162 x 251,示例中的红点是变形的锚点. 变形之后: 1.2 代码 package com.e.weixin.session.view; impor ...
- 453 Minimum Moves to Equal Array Elements 最小移动次数使数组元素相等
给定一个长度为 n 的非空整数数组,找到让数组所有元素相等的最小移动次数.每次移动可以使 n - 1 个元素增加 1.示例:输入:[1,2,3]输出:3解释:只需要3次移动(注意每次移动会增加两个元素 ...
- [转]为革命保护视力 --- 给 Visual Studio 换颜色
本文转自:http://www.cnblogs.com/stg609/p/3723968.html “为革命,保护视力,预防近视,眼保健操开始......” 这个应该是最老版本的眼保健操了,你听过? ...
- 升级Python2.7
习惯于centos6.5的系统,却习惯使用Python2.7,每次都会升级Python版本,安装pip.于是总结了升级过程中遇到问题(原创) 升级Python2.7 注意的是 1.编译2.7时依赖问题 ...
- AJPFX关于Java Object类常用方法小总结
java.lang.Object java.lang包在使用的时候无需显示导入,编译时由编译器自动导入. Object类是类层次结构的根,Java中所有的类从根本上都继承自这个类. Object类 ...
- hihocoder编程练习赛52-2 亮灯方案
思路: 状态压缩dp.实现: #include <bits/stdc++.h> using namespace std; typedef long long ll; ; ] = {, , ...