input file上传图片预览,非插件
Input标签
<input type="file" name="pic" onchange="changepic(this)" multiple="multiple"/>
JS方法
function changepic(obj) {
//console.log(obj.files[0]);//这里可以获取上传文件的name
var newsrc = getObjectURL(obj.files[0]);
document.getElementById('show').src = newsrc;
}
function getObjectURL(file) {
var url = null;
// 下面函数执行的效果是一样的,只是需要针对不同的浏览器执行不同的 js 函数而已
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
input file上传图片预览,非插件的更多相关文章
- 前端实现input[type='file']上传图片预览效果
众所周知JavaScript在设计上处于安全角度考虑,是不允许读写本地文件的(原因请自行百度): 但是在实际项目应用中,经常会使用到上传图片,并且可以让用户直接预览图片.对于此种做法有两种方法可以实现 ...
- 上传图片预览JS脚本 Input file图片预览的实现示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 一段上传图片预览JS脚本,Input file图片预览的实现
在深圳做项目的时候,需要一个用户上传头像预览的功能!是在网上找了好多,都不太满意.要么是flash的,要么是Ajax上传后返回图片路径的,要么压根就是不能用的.幸运的是在这个项目以前有人写过一个图片预 ...
- input file 模拟预览图片。
首先申明,接下来内容只是单纯的预览图片,最多选择九张,并没有和后台交互,交互的话需要自己另外写js. 本来想写一个调用摄像头的demo,意外的发现input file 在手机端打开的话,ios可以调用 ...
- HTML5上传图片预览
<!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...
- jquery实现上传图片预览(需要浏览器支持html5)
jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- HTML5上传图片预览功能
HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...
- JS 上传图片 + 预览功能(一)
JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...
- js兼容火狐显示上传图片预览效果
js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...
随机推荐
- C++11 type_traits 之is_pointer,is_member_function_pointer源码分析
源码如下: template<typename> struct __is_pointer_helper : public false_type { }; template<typen ...
- 前端开发工程师 - 02.JavaScript程序设计 - 第1章.基础篇
第1章--基础篇 JS介绍 html 网页的内容:css 网页的样式:javascript 网页的行为 i.e. hello world <!DOCTYPE html> <html& ...
- SQL语言重点学习
数据库的操作任务通常包括以下几个方面: 1.查询数据. 2.在表中插入,修改和删除记录. 3.建立,修改和删除数据对象. 4.控制对数据和数据对象的读写. 5.保证数据库一致性和完整性. SQL语言学 ...
- 【system.file】使用说明
对象:system.file 说明:提供一系列针对文件操作的方法. 注意:参数中的filePath 均为相对网站根目录路径 目录: 方法 返回 说明 system.file.exists(filePa ...
- Java 消息对列
ActiveMQ入门实例 1.下载ActiveMQ 去官方网站下载:http://activemq.apache.org/ 2.运行ActiveMQ 解压缩apache-activemq-5.5. ...
- 数据库Mysql的学习(二)-数据类型和创建
数据类型:数据列,存储过程参数,表达式和局部变量的数据特征. 整形: tinyint:一个字节,-128到127:2的7次方 smallint:两个字节,-32768到32767:2的15次方 med ...
- 校招小白机考入坑之从键盘输入java的各种数据类型
//1.从键盘输入一个整型(其他基本类型类似) Scanner sc =new Scanner(System.in); sc.hasNextInt(); int str1 = sc.nextInt() ...
- 概要梳理kafka知识点
主要是梳理一下kafka学习中的一些注意点,按照消息的流动方向进行梳理.详细的kafka介绍推荐看骑着龙的羊的系列博客,具体的某一块的知识点,可以参考我给出的一些参考文章. 1. kafka在系统中的 ...
- [leetcode-738-Monotone Increasing Digits]
Given a non-negative integer N, find the largest number that is less than or equal to N with monoton ...
- Notes of the scrum meeting(12.11)
meeting time:19:30~20:30p.m.,December 11th,2013 meeting place:3号公寓一层 attendees: 顾育豪 ...