今天实现上传图片到服务器

简单的jQuery实现input file选择图片后,可以预览图片的效果

简单的HTML代码:

 <div>
<img src="" class="img">
</div> <input type="file" class="imgInput">

 注:img就是用来显示预览图片的

然后就是jQuery代码,很简单

$(".imgInput").change(function(){
$(".img").attr("src",URL.createObjectURL($(this)[0].files[0]));
});

然后就实现了选择图片后可以预览图片的效果了

其中需要注意的是使用的是DOM元素,jQuery元素和DOM元素之间的转换

Input File选择图片后,未保存预览的更多相关文章

  1. input file选择图片后 预览

    很多前端都选择用插件来实现图片预览,这个小功能也可以很简单的用jQuery来实现 简单的jQuery实现input file选择图片后,可以预览图片的效果 简单的HTML代码: <div> ...

  2. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  3. file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  4. 【转】html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  5. input type=file实现图片上传,预览以及图片删除

    背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...

  6. 移动端 H5 拍照 从手机选择图片,移动端预览,图片压缩,图片预览,再上传服务器

    前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站 的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传. 这个功能模块主要有这5点比较 ...

  7. type="file" 选择图片后预览

    function setImagePreview(avalue) { var docObj = document.getElementById("doc"); var imgObj ...

  8. H5 选择图片上传及预览

    <div class="sctp"> <img src="img/sczp.png" id="photo" alt=&qu ...

  9. input type=file 选择图片并且实现预览效果的实例

    为大家带来一篇input type=file 选择图片并且实现预览效果的实例. 通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型, ...

随机推荐

  1. 制作自己的特色PE----Mr.Zhang

    必备的文件和工具 win7.iso/win8.iso Windows系统ISO镜像 WimTool BOOT.WIM文件的改动 RegWorkShop 注冊表编辑和分析利器 UltraISO 改动wi ...

  2. ZOJ 2588 Burning Bridges(无向连通图求割边)

    题目地址:ZOJ 2588 由于数组开小了而TLE了..这题就是一个求无向连通图最小割边.仅仅要推断dfn[u]是否<low[v],由于low指的当前所能回到的祖先的最小标号,增加low[v]大 ...

  3. c++动态库中使用命名空间的问题

    这是C++才会有的语言特性. 假如你使用一个程序库,他里面有桓霰淞拷衋bc,可是你自己也不小心定义了一个叫abc的变量,这样就会引起重定义错误.所以为了避免这样的现象,C++引入了名字空间(names ...

  4. “DNS隧道”盗号木马分析——类似hjack偷密码然后利用dns tunnel直传数据发送出去

    摘自:http://www.freebuf.com/articles/network/38276.html# 运行后不断监控顶端窗口,一旦发现为QQ,就弹出一个自己伪造的QQ登陆窗口,诱导用户输入密码 ...

  5. AngularJS初接触

    todo.json [ { "action": "Buy Flowers", "done": false }, { "action ...

  6. vue-router学习例子分享

    http://blog.csdn.net/bboyjoe/article/details/52804988 <!DOCTYPE html> <html lang="en&q ...

  7. sqlserver自定义函数(标量值函数,表值函数)

    用户自定义的函数有两类:表值函数.标量值函数. 表值函数:返回值是数据表的函数 调用方式 select  b.*  from tableA a accross apply Fun_BiaoZhiFun ...

  8. 联想 U410 超极本启用加速硬盘方法

    安装步骤: 方法一: 使用raid1方法 (此方法未安装过) 方法二:  普通安装后,使用RST加速 1.改BIOS , 为AHCI启动    , 2.安装好系统后,下载RST软件并安装 3.改BIO ...

  9. 干货分享 -- Math

    昼猫笔记 JavaScript -- Math Math也是JS的内置对象,但是它不是一个构造函数,它属于一个工具类不用创建对象,它封装了数学运算相关的属性和方法,今天就来写下常用的函数[API(ap ...

  10. web开发快速提高工作效率的一些资源

    前端学习资源实在是又多又广,在这样的一个知识的海洋里,我们像一块海绵一样吸收,想要快速提高效率,平时的总结不可缺少,以下总结了一些,排版自我感觉良好,推送出来,后续持续跟新中...... 开发工具 H ...