js读取本地图片并显示
抄自
http://blog.csdn.net/qiulei_21/article/details/52785191
第一种方法比较好
版权声明：本文为博主原创文章，未经博主允许不得转载。 根据项目需要，需要选择本地图片并显示在页面上，然后上传至服务器。因为自身刚刚接触js,所以比较生疏，碰到问题吼，幸好有强大的网络，搜索很多有用的资源，现在将js读取本地图片并显示的代码总结一下，供大家使用，并给自己一个记录。 第一种方法： <script type="text/JavaScript">
//图片显示插件
(function ($) {
$.imageFileVisible = function (options) {
// 默认选项
var defaults = {
//包裹图片的元素
wrapSelector: null,
//<input type=file />元素
fileSelector: null,
width: '100%',
height: 'auto',
errorMessage: "不是图片"
};
// Extend our default options with those provided.
var opts = $.extend(defaults, options);
$(opts.fileSelector).on("change", function () {
var file = this.files[0];
var imageType = /image.*/;
if (file.type.match(imageType)) {
var reader = new FileReader();
reader.onload = function () {
var img = new Image();
img.src = reader.result;
$(img).width(opts.width);
$(img).height(opts.height);
$(opts.wrapSelector).append(img);
};
reader.readAsDataURL(file);
} else {
alert(opts.errorMessage);
}
});
};
})(jQuery);
$(document).ready(function () {
//图片显示插件
$.imageFileVisible({ wrapSelector: "#image-wrap1",
fileSelector: "#file1",
width: 300,
height: 300
});
$.imageFileVisible({ wrapSelector: "#image-wrap2",
fileSelector: "#file2",
width: 300,
height: 300
});
});
</script>
<div id="ImportHead">
<table border="0" class="frm" style="height: 35px; width: auto; padding-left: 5px;
padding-top: 1px;">
<tr style="width: 300px; height: 400px;">
<th>
选择图1：
</th>
<td>
<input type="file" id="file1">
<div id="image-wrap1" style="width: 300px; height: 300px; border: solid 1px lightGray">
</div>
</td>
<th>
选择图2：
</th>
<td style="width: 300px;">
<input type="file" id="file2">
<div id="image-wrap2" style="width: 300px; height: 300px; border: solid 1px lightGray">
</div>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: right">
<input type="submit" id="btnUpload" class="btnSearch" value="上传" />
</td>
</tr>
</table>
</div> 第二种方法： <html>
<body>
<img id="image"src=""/>
<br/>
<input type="file"onchange="selectImage(this);"/>
<br/>
<script>
var image = '';
function selectImage(file) {
if (!file.files || !file.files[0]) {
return;
}
var reader = new FileReader();
reader.onload = function (evt) {
document.getElementById('image').src = evt.target.result;
image = evt.target.result;
}
reader.readAsDataURL(file.files[0]);
}
</script>
</body>
</html>
js读取本地图片并显示的更多相关文章
- Springboot读取本地图片并显示
在application.yml中配置url访问路径和本地图片路径: 方框1:url中访问路径,这里为:localhost:8080/testspringboot/image/... 方框2:本地图片 ...
- java 通过流的方式读取本地图片并显示在jsp 页面上(类型以jpg、png等结尾的图片)
Java代码: File filePic = new File(path+"1-ab1.png"); if(filePic.exists()){ FileInputStream i ...
- pyqt5 多线程+定时器+读取本地图片
前言 一个程序界面有多个button 按钮时,单击一个按钮,若此按钮对应的信号正在执行,且还未执行完毕: 此时再次单击另外一个按钮,就会出现假死状态. 这个时候我们就需要使用 多线程去解决 多线程+定 ...
- 手工创建tomcat应用，以及实现js读取本地文件内容
手工创建tomcat应用: 1.在webapps下面新建应用目录文件夹 2.在文件夹下创建或是从其他应用中复制:META-INF,WEB-INF这两个文件夹, 其中META-INF清空里面,WEB-I ...
- window.open()读取本地图片简单使用总结
最近做了一个项目,需要读取本地图片出来,问了一些人,感觉在数据库中存取路径比较合适,故做此方法. 后台查询出来的路径
- FileReader：读取本地图片文件并显示
最近忙得比狗还惨,导致长时间没能更新文章,真心对不住啊.抽空整理了下关于在页面上读取和显示本地图片的实例文章,本文通过实例讲解如何使用支持FileReader浏览器的用户将能够通过一个file inp ...
- UE4 读取本地图片
参考链接:https://answers.unrealengine.com/questions/235086/texture-2d-shows-wrong-colors-from-jpeg-on-ht ...
- phonegap(cordova) 自己定义插件代码篇（四）----读取本地图片
有时候确实知道本地图片地址,要获取到base64 /** * 获取本地图片,包括路径和压缩后的 base64 */ (function (cordova) { var define = cordov ...
- android获取本地图片并显示图片
import java.io.FileNotFoundException; import android.content.ContentResolver; import android.content ...
随机推荐
- 第六篇——Struts2的后缀
Struts2后缀 1.Struts2默认后缀是action: 2.Struts2使用默认后缀时 *.aciton 和 * 都是同一个请求: 3.Struts2自定义后缀后只能使用自定义的后缀访问: ...
- 移动端picker插件
项目需要,要做移动端网页,比如选择出生日期什么的.可笑weui给的控件,竟然选择后的数据不准确. 于是自己写了一个. 链接: https://pan.baidu.com/s/1qY2SSxQ 密码: ...
- java线程学习之线程创建
线程是程序控制的一个内部数据流.线程的状态转化如下 或者 在java中创建线程有两种方式: 1.实现runnable接口(这个比较好,推荐这个.原因是:用的时候比较灵活,相比较继承Thread类,用接 ...
- oracle(2)
create table aaa( id number, name varchar2(100) ); select decode((select max(id) from aaa),null,'x', ...
- JavaScript Dom0 Dom1
行为 样式 结构相分离的页面 JS CSS HTML DOM 0写法 <!DOCTYPE html> <html lang="en"&g ...
- [c/c++] programming之路（14）、数组+冒泡和选择排序
一.数组的基本知识 #include<stdio.h> #include<stdlib.h> void main0(){ ]={,,,,};//数组在内存里是连续排列的 int ...
- 剑指offer（12）数值的整数次方
题目描述 给定一个double类型的浮点数base和int类型的整数exponent.求base的exponent次方. 题目分析 这道题用传统的方法也可以做,只不过效率太低,这里我们用到快速幂的方法 ...
- File 与 FileStream 文件运用
using System.IO; using System.Text; using UnityEngine; /// <summary> /// File 一次性控制 (小文件) /// ...
- linux驱动编写（pwm驱动）【转】
本文转载自:https://blog.csdn.net/feixiaoxing/article/details/79889240 pwm方波可以用来控制很多的设备,比如它可以被用来控制电机.简单来说, ...
- linux shell中如何删除指定后缀名的文件?
答: find . -name '*.txt' -delete 这条命令含义如下: 从当前目录开始查找以txt为后缀名的文件并删除掉