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

简单的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. Spark修炼之道(高级篇)——Spark源代码阅读:第十二节 Spark SQL 处理流程分析

    作者:周志湖 以下的代码演示了通过Case Class进行表Schema定义的样例: // sc is an existing SparkContext. val sqlContext = new o ...

  2. PHP开源网

    网站地址http://www.cnblogs.com/huijieoo/

  3. HUE配置文件hue.ini 的desktop模块详解(图文详解)(分HA集群)

    http://archive.cloudera.com/cdh5/cdh/5/hue-3.9.0-cdh5.5.4/manual.html#_install_hue [desktop]这块,配置如下 ...

  4. Python正则表达式初识(四)

    今天继续给大家分享Python正则表达式基础知识,主要给大家介绍一下特殊字符“{}”的用法,具体的教程如下. 特殊字符“{}”实质上也是一个限定词的用法,其限定前面字符所出现的次数,其常用的模式有三种 ...

  5. CodeBlocks 配色方案

    搜索<colour_sets>,在</ACTIVE_LANG>下加入: 有几种经典方案,包括vim,desert,sublime,ulipad,oblivion,darkgra ...

  6. React开发实时聊天招聘工具 -第一章

    第一章 课程道学 6个页面 弱化css Antd-mobile作为组件库 Redux 状态管理 React-Router 路由 Axios异步请求 后端Express框架 Socket.io 数据库: ...

  7. cd---切换工作目录

    cd命令用来切换工作目录至dirname. 其中dirName表示法可为绝对路径或相对路径.若目录名称省略,则变换至使用者的home directory(也就是刚login时所在的目录).另外,~也表 ...

  8. android側滑菜单-DrawerLayout的基本使用

    眼下主流App开发中,部分是以側滑菜单为主布局架构,曾经做android側滑菜单时.大多选择使用github上的第三方开源框架SildingMenu,可是这个框架还是稍显笨重.好消息是google已经 ...

  9. js插件---tree(多级文件)插件如何使用

    js插件---tree(多级文件)插件如何使用 一.总结 一句话总结:还是一般的引入js和css后js调用的方式, 只不过tree调用的时候必须设置一个 HTML 模板(就是调用的那段html代码,别 ...

  10. 暑假集训-二分图,网络流,2-SAT

    匈牙利算法DFS bool dfs(int u){ ; i <= n; i++){ if(a[u][i] && !visit[i]){ visit[i] = true; || d ...