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

简单的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. Bootstrapbutton组

    button组同意多个button被堆叠在同一行上.当你想要把button对齐在一起时,这就显得很实用. 基本button组 给div加上class .btn-group <!DOCTYPE h ...

  2. Unix网络编程之环境搭建

    环境搭建 在尝试UNP书上的样例时,会由于找不到"unp.h"等问题无法编译成功.因此在学习之前须要先搭建好编译环境. 步骤 <1>下载  UNIX网络编程源码unpv ...

  3. 异步FIFO及verilog原码

    这几天看了Clifford E. Cummings的两篇大作<Simulation and Synthesis Techniques for Asynchronous FIFO Design&g ...

  4. 分享:FIFO 同步、异步以及Verilog代码实现

    FIFO 很重要,之前参加的各类电子公司的逻辑设计的笔试几乎都会考到. FIFO是英文First In First Out 的缩写,是一种先进先出的数据缓存器,他与普通存储器的区别是没有外部读写地址线 ...

  5. hight charts

    hight charts http://www.hcharts.cn/resource/index.php http://www.hcharts.cn/api/index.php

  6. cf 828 A. Restaurant Tables

    A. Restaurant Tables time limit per test 1 second memory limit per test 256 megabytes input standard ...

  7. Codefroces 731C. Socks

    C. Socks time limit per test 2 seconds memory limit per test 256 megabytes input standard input outp ...

  8. Fedora27 源配置

    一.添加阿里源,阿里源我感觉是现在国内比较好用的源,支持的发行版比较全.配置方法1.备份系统自带的源mv /etc/yum.repos.d/fedora.repo /etc/yum.repos.d/f ...

  9. selenium无法定位元素问题

    在用自动化测试工具selenium完成下载任务时,经常会遇到定位不到元素的情况,总结如下: 1.frame/iframe原因定位不到元素: 这个是最常见的原因,首先要理解下frame的实质,frame ...

  10. BZOJ5408: string(广义后缀自动机,LCT)

    传送门 解题思路: 首先在后缀树上,确定了一个节点就相当于确定了一个串,那么一个点对应的串在另外一个点对应的串产生贡献,当且仅当这个点在当前点子树内. 那么考虑一个新的点在串中对串答案的贡献在一条树链 ...