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

简单的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. iOS 实现QQ界面

    应师傅要求编写个QQ界面来不吝赐教下我的代码问题. 编写个QQ界面.有三个组,每一个组有人.并显示在线不在线. 先看一下效果图 这里省了事由于我的图片仅仅用了一张.假设要依据人的不同设置,仅仅要在ce ...

  2. 简单缓存Cache

    接口 interface ICache { /// <summary> /// 添加 /// </summary> /// <param name="key&q ...

  3. 27.C语言宽字符操作

    #include <locale.h> setlocale(LC_ALL, "zh-CN"); wchar_t wch = L'我'; putwchar(wch); # ...

  4. BZOJ1901 ZOJ2112 线段树+treap (线段树套线段树)

    BZOJ1901: 线段树套线段树做法: (外层线段树 里层动态开节点的权值线段树) 有一个小小的trick 可以省掉二分变成nlog^2n的 就是把查询的区间都取出来- logn个一起走- 2016 ...

  5. CodeBlocks 配色方案

    搜索<colour_sets>,在</ACTIVE_LANG>下加入: 有几种经典方案,包括vim,desert,sublime,ulipad,oblivion,darkgra ...

  6. 【Docker端口映射】

    Docker端口映射即将容器内开放的端口映射到宿主机端口,以实现外部网络的访问. 首先,我们先下载用于测试端口映射的镜像: [root@fedora ~]# docker pull training/ ...

  7. 今日SGU 5.13

    SGU 146 题意:就是给你一个长度为l的圈,然后你跑步,每一段给你时间t和速度v,问你最后离起点多远 收获:就是把浮点数转为整数,然后但是会出现精度误差,比如l最多四位小数,那你就加0.00001 ...

  8. 洛谷 P2690 接苹果

    P2690 接苹果 题目背景 USACO 题目描述 很少有人知道奶牛爱吃苹果.农夫约翰的农场上有两棵苹果树(编号为1和2), 每一棵树上都长满了苹果.奶牛贝茜无法摘下树上的苹果,所以她只能等待苹果 从 ...

  9. win系统下的eclipse连接和使用linux上的hadoop集群

    准备工作 先在win系统的hosts文件中加入下面内容 10.61.6.164master     //hadoop集群的master节点 一.首先在eclipse上安装hadoop插件 下载hado ...

  10. 游戏server之server优化思路

    本文仅仅是提供一些游戏server优化思路,当中一些思路是用在不同场合的,不是同个架构的.须要依据应用场景选用合适方式. 本文的引用的文章都是在自己写的在本博客内的.也都是上线开几百个服的成熟项目的. ...