Input File选择图片后,未保存预览
今天实现上传图片到服务器
简单的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选择图片后,未保存预览的更多相关文章
- input file选择图片后 预览
很多前端都选择用插件来实现图片预览,这个小功能也可以很简单的用jQuery来实现 简单的jQuery实现input file选择图片后,可以预览图片的效果 简单的HTML代码: <div> ...
- html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- 【转】html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- input type=file实现图片上传,预览以及图片删除
背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...
- 移动端 H5 拍照 从手机选择图片,移动端预览,图片压缩,图片预览,再上传服务器
前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站 的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传. 这个功能模块主要有这5点比较 ...
- type="file" 选择图片后预览
function setImagePreview(avalue) { var docObj = document.getElementById("doc"); var imgObj ...
- H5 选择图片上传及预览
<div class="sctp"> <img src="img/sczp.png" id="photo" alt=&qu ...
- input type=file 选择图片并且实现预览效果的实例
为大家带来一篇input type=file 选择图片并且实现预览效果的实例. 通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型, ...
随机推荐
- 面对即将终止支持的server你还能做些什么
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaXF1c2hp/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/d ...
- dotnet 命令的使用
dotnet --info PS E:\GitHub\KerryJiang\SuperSocket> dotnet --info.NET Command Line Tools (2.1.4) P ...
- mybatis:开发环境搭建--增删改查--多表联合查询(多对一)
什么是mybatisMyBatis是支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及结果集的检索.MyBatis使用简单的XML或 ...
- HIVE JOIN_1
HIVE JOIN 概述 Hive join的实现包含了: Common (Reduce-side) Join Broadcast (Map-side) Join Bucket Map Join So ...
- 解决The requested resource is not available的办法
1.问题描述: eclipse中使用tomcat来运行HelloWorld时出现The requested resource is not available. 在报错中有一行Setting prop ...
- iOS菜鸟成长笔记(1)——第一个iOS应用
前言:阳光小强最近抽时间学习iOS开发,在学习过程中发现了很多有趣的东西也遇到了很多问题,为了在学习过程中能和大家交流,记录下学习的心得和学习成果,所以就有了这一个系列文章,希望这一系列文章能形成一个 ...
- vue 指令的用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 定时器函数SetTimer
原文链接:http://www.cnblogs.com/zhangpengshou/archive/2009/04/05/1429770.html 一.SetTimer表示的是定义个定时器.根据定义指 ...
- JAVA实现排队论
转载请注明出处:http://blog.csdn.net/xiaojimanman/article/details/50401727 http://www.llwjy.com/blogdetail/3 ...
- VTK的安装配置-使用VS2010
1.CMake的安装 CMake安装是用来对VTK编译前的配置工作.此博客中使用的是CMake2.8.CMake的下载可到https://cmake.org/站点上进行下载. 2.VTK源代码 VTK ...