html代码

<input type="file" name="file"  id="file" >
<img src=""  id="img">

js代码

    $("#file").bind("change",function(){
var url = null;
if(window.createObjectURL != undefined) {
url = window.createObjectURL(this.files[0]);
} else if(window.URL != undefined) {
url = window.URL.createObjectURL(this.files[0]);
} else if(window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(this.files[0]);
}
$("#img").attr("src",url);
})

input预览上传图片的更多相关文章

  1. html5 ajax多图片可预览上传图片

    最近不是特别忙,我就利用html5写了个上传图片(或其他文件)的页面,主要利用是html5的file api,此页面比较简陋,没做样式的优化,包含上传图片预览,多图片上传,上传进度条(利用html5的 ...

  2. js预览上传图片

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. IE8/9 本地预览上传图片

    本地预览的意思是,在选择图片之后先不上传到服务器,而是由一个<img>标签来预览本地的图片,非 IE8/9 浏览器可以从<input type="file"/&g ...

  4. js 压缩 预览 上传图片

    com.js export const compressImage=function (files,fn,preCallbackFn,i) { let newfile = files.files[0] ...

  5. PHP jQuery实现上传图片时预览图片的功能实例

    在PHP项目开发中,有时候经常需要做添加图片的功能.添加图片时,一般需要即时预览上传的图片.下面这个例子就是简单的预览上传图片功能,代码如下(分两部分): 1.HTML代码: <div clas ...

  6. 适用于各浏览器支持图片预览,无刷新异步上传js插件

    文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...

  7. input上传图片(file),预览图片的两种方法。blob与base64编码

    上传图片时一般都需要预览,我一般用这两种方法来实现.base64编码可以直接上传到后台,后台解析下,得到的文件就会比较小了,省去了压缩图片这一步了. //获取对象input file 的图片地址,放进 ...

  8. 前端实现input[type='file']上传图片预览效果

    众所周知JavaScript在设计上处于安全角度考虑,是不允许读写本地文件的(原因请自行百度): 但是在实际项目应用中,经常会使用到上传图片,并且可以让用户直接预览图片.对于此种做法有两种方法可以实现 ...

  9. vue <input type="file">上传图片、预览、删除

    使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张 参数名 类型 说明 fileTypes Array 文件类型, 默认 ...

随机推荐

  1. Vue(4)- 获取原生的DOM的方式、DIY脚手架、vue-cli的使用

    一.获取原生的DOM的方式 在js中,我们可以通过id.class或者标签获取DOM元素,vue中也为我们提供了获取原生DOM的方法,就是给标签或者组件添加ref属性,通过this.$refs获取,如 ...

  2. MySQL数据库(4)- 多表查询、可视化工具Navicat的使用、设计模式MVC

    一.多表查询 准备工作:创建两张表,部门表(department).员工表(employee),代码和表格如下: # 创建表 create table department( id int, name ...

  3. Android Paint setXfermode

     背景: dst        前景: src  PorterDuff.Mode.CLEAR 清除画布上图像 PorterDuff.Mode.XOR 取两层图像的非交集部门 PorterDuff.Mo ...

  4. MYSQL SET ENUM字段类型

    show create table stu;//显示建表语句 create table t1(t enum('a','b','c')); insert into t1 values('a'); cre ...

  5. mysql进阶(一)

    本节目录 1.视图 2.存储过程 3.函数 4.事务 5.触发器 6.流程控制语句 1.视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用 ...

  6. 用python简便地抓取刘昊然的写真(17行代码)

    17行python代码抓取刘昊然图片之家的写真 用python来爬取网页信息是很简便的.因为它有很多库来帮助我们实现我们想要的功能.本实验用到的库有:requests和bs4中的BeautifulSo ...

  7. ES6的十个新特性

    这里只讲 ES6比较突出的特性,因为只能挑出十个,所以其他特性请参考官方文档: /** * Created by zhangsong on 16/5/20. *///    ***********Nu ...

  8. 第二课客户端链接Linux系统

    使用Putty客户端软件连接Linux主机 使用rpm –qa | grep ssh命令查看是否已经安装ssh服务,如下图是已经安装了ssh服务,如果未列出相关的openssh那么代表未安装这时候就需 ...

  9. 子元素绝对定位absolute后,自动撑开宽度

    position: absolute;   white-space: nowrap;

  10. php debug函数

    $debug=$_GET['debug'];//是说获取url中debug变量$debug=empty($debug)?'':$debug;//如果变量不为空,赋值为$debug,为空的话赋值 ''$ ...