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

简单的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. 【POJ 2195】 Going Home(KM算法求最小权匹配)

    [POJ 2195] Going Home(KM算法求最小权匹配) Going Home Time Limit: 1000MS   Memory Limit: 65536K Total Submiss ...

  2. 6.C语言迷宫程序界面版

    写迷宫程序首先需要安装图形库easyX 安装地址链接:https://pan.baidu.com/s/1qZwFn3m 密码:ozge 项目截图: //左上角是七点,右下角是终点,蓝色表示的是走过的路 ...

  3. RedHat Linux 多媒体学习指南 (共 36 部原创视频)

    1.为sco unix 添加第二块网卡 [url]http://you.video.sina.com.cn/b/11695632-1443650204.html[/url]   2.为sco unix ...

  4. Ubuntu16.04+Gnome3 锁定屏幕快捷键无效解决办法

    Ubuntu16.04 桌面环境通过Ubuntu server和后安装的Gnome3 桌面环境实现,安装完以后发现锁定屏幕快捷键无效,系统设置=>键盘=>快捷中 锁屏快捷键已经存在Supe ...

  5. js笔记3

    1字符串 replace("","")替换,前面为要替换什么,后面为替换的内容只能替换一个 2DOM 时间三要素 事件源 谁身上发生的行为 事件 单机 双击 事 ...

  6. 实现人脸识别性别之路---try语句的使用

    Try语句 用法:处理异常信息 存在的形式:try-except X-except T...-except-else-finally(其中X T为错误的类型) 表达意思:try语句是执行正常语句,如果 ...

  7. Scrapy 框架介绍

    Scrapy 框架 Scrapy,Python开发的一个快速.高层次的屏幕抓取和web抓取框架,用于抓取web站点并从页面中提取结构化的数据.Scrapy用途广泛,可以用于数据挖掘.监测和自动化测试. ...

  8. PHP和js判断访问终端是否是微信浏览器

    http://www.sucaihuo.com/php/813.html http://www.thinkphp.cn/extend/767.html http://blog.csdn.net/gf7 ...

  9. qt获取磁盘序列号

    #include "windows.h" QString lpRootPathName = "c:\\"; LPTSTR lpVolumeNameBuffer= ...

  10. LeetCode102 Binary Tree Level Order Traversal Java

    题目: Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to ri ...