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

简单的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. 用motion实现家庭视频监控

    需求?当然不是为了艳照.你们这些猥琐的人类! 毕竟家里总会有没人的时候,出门走到半路忘记煤气灶是不是关了,还得回去看看. 在这个科技以人为本的时代,当然应该是拿出智能手机联网看看啦.还有万一有人闯空门 ...

  2. ORA-01555错误总结(二)

    这篇文章紧接着上一篇"ORA-01555错误总结(一)".主要描写叙述延迟块清除导致的ORA-01555错误. 以下是一些简介(上一遍已经介绍过) ORA-01555错误是一种在o ...

  3. java内部类的初始化

    public class InnerClassTest { /** * @param args */ public static void main(String[] args) { // TODO  ...

  4. Linux下清除系统日志方法

    摘要:相信大家都是用过Windows的人.对于Windows下饱受诟病的各种垃圾文件都需要自己想办法删除,不然你的系统将会变得越来越大,越来越迟钝!windows怎么清理垃圾相信大家都知道的,那么li ...

  5. 2.AngularJS-验证

    转自:https://www.cnblogs.com/best/p/6225621.html 一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属 ...

  6. 22.dll调用技术

    1.dll文件: #include <Windows.h> _declspec(dllexport) void message_hello() { MessageBoxA(, ); } _ ...

  7. HDU 5375 Gray Code 动归

    题意:给你一串不确定的二进制码,其对应的格雷码的每一位有对应的权值,问转换成的格雷码的能取到的最大权值是多少. 思路:没有思路,乱搞也AC #pragma comment(linker, " ...

  8. Android Unknown failure (Failure - not installed for 0)

    File->Settings->Build,Execuion,Deployment->Instant Run然后把Enable Instant Run to...那一项的勾去掉就好了

  9. 手把手教你安装Navicat——靠谱的Navicat安装教程

    Navicat是一款轻量级的用于MySQL连接和管理的工具,非常好用,使用起来方便,简洁.下面讲讲其安装的过程. 1.进入navicat官网,选择Navicat for MySQL,然后点击进行下载即 ...

  10. 【Codeforces Round #459 (Div. 2) C】The Monster

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 左括号看成1 右括号看成-1 设置l,r表示前i个数的和的上下界 遇到 左括号 l和r同时加1 遇到右括号 同时减1 遇到问号 因为 ...