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

简单的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. Android程序猿自己动手制作.9.png图片

    1:怎样制作9.png图片素材: 打开SDK工具文件夹下: draw9patch.zip  解压执行draw9patch.bat.有的直接搜索会有:draw9patch.bat. 双击执行后,例如以下 ...

  2. export和source的区别

    1.执行脚本是在一个子shell环境运行的,脚本执行完后该子shell自动退出. 2.执行脚本中的系统环境变量(用export定义的变量)才会被复制到子shell中. 3.一个shell中的系统环境变 ...

  3. 2.CString转换到char*

    多字节模式下: CString -->char * CString str1 ="; char *t1 =str1.GetBuffer(str1.GetLength()); str1. ...

  4. Servlet doPost方法同时上传图片和传递参数

    上传图片和传递参数 上传图片和文件属于enctype="multipart/form-data"  form中加入enctype="multipart/form-data ...

  5. linux RAC 安装失败完全卸载

    1,删除软件安装目录 rm -rf /u01/app 2,删除以下目录内容 rm -rf /tmp/.oracle rm -rf   /tmp/* rm -rf   /tmp/ora* rm -rf ...

  6. 关于【搭建LAMP环境时,php测试页面打不开】解决

    关于[搭建LAMP环境时,php测试页面打不开]解决 〇.我的测试页面是: http://172.30.124.10/index.php 用火狐打不开,如下图. 一.httpd已经启动了(system ...

  7. div设置了居中和宽度,但是显示时宽度占100%

    <div id="bigDiv" align="center"> <div id="bottom" style=" ...

  8. struts2的字符串参数

    一定要熟记一个东西,一层引号的是变量,两层引号的是字符串 如"蓝"/'蓝'是变量,而" '蓝' "/ ' "蓝" '是字符串 打代码时要警惕 ...

  9. vector要注意的点

    vector的元素类别T,必须具备assignable和copyable两个性质. vector的容量很重要: 1. 一旦内存重新配置,和vector元素相关的所有references.pointer ...

  10. Android.mk脚本推断文件是否存在

    Android.mk 推断文件是否存在,若存在则复制该文件到某个文件夹 $(shell test -f [文件] && echo yes)的值假设是yes, 则文件存在,然后进行she ...