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. Lua(1)

    1.the use of functions in table fields is a key ingredient for some advanced uses of Lua, such as mo ...

  2. oradebug工具使用(转载)

    在之前的HangAnalyze 中有使用oradebug命令,在这篇文章里,我们主要是重点看一下这个oradebug命令: Oracle HANGANALYZE 功能诊断 DB hanging htt ...

  3. CNN学习笔记:正则化缓解过拟合

    CNN学习笔记:正则化缓解过拟合 过拟合现象 在下图中,虽然绿线完美的匹配训练数据,但太过依赖,并且与黑线相比,对于新的测试数据上会具有更高的错误率.虽然这个模型在训练数据集上的正确率很高,但这个模型 ...

  4. C++模板专门化与重载

    最近在复习C++有关知识,又重新看<<Effective C++>>,收获颇丰.原来以前看这边书,好多地方都是浅尝辄止.<<Effective C++>> ...

  5. Web前端学习笔记之BootStrap

    Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 它支持响应式布局,并且 ...

  6. Collection与Collections、ArrayList和Vector、HashMap和Hashtable(面试常用)

    Collections与Collection 1. Collections是java.util下的类,它包含有各种有关集合操作的静态方法2. Collection是java.util下的接口,它是各种 ...

  7. require和require_once经济性能对比

    require和require_once都是PHP函数,开发人员可以使用它们在某个特定的脚本中导入外部PHP文件.你可以根据应用程序的复杂度调用一次或若干次require_once/require.使 ...

  8. 20145201 《Java程序设计》第三周学习总结

    20145201 <Java程序设计>第三周学习总结 教材学习内容总结 本周学习了课本第四.五章内容,即认识对象和对象封装. 第四章 认识对象 4.1类与对象 定义类 要产生对象必须先定义 ...

  9. 函数:生成1-n的随机数组,

    方法很笨,不过可行: #include <stdio.h> /** 功能:获取一个1-n的随机数数组,这些随机数都互不相同 ** 入参:n-表示最大随机数: *randArray -用于储 ...

  10. apache性能测试工具ab

    性能测试工具目前最常见的有以下几种:ab.http_load.webbench.siege ab是apache自带的压力测试工具.ab非常实用,它不仅可以对apache服务器进行网站访问压力测试,也可 ...