图片上传预览

原创 2016年08月29日 21:40:48

1、导入jQuery库

<script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js" type="text/javascript"></script>
2、编写html

<input type="file" name="pimage" id="file0"/>
<img src="" id="img0" >

3、编写js

<script type="text/javascript">

$("#file0").change(function(){

var objUrl = getObjectURL(this.files[0]) ;
console.log("this.files[0]-----"+this.files[0]);
console.log("objUrl = "+objUrl) ;
if (objUrl) {
$("#img0").attr("src", objUrl) ;
}
}) ;
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ; 
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;


</script>


html5实现表单内的上传文件框,建立一个可存取到该file的url。

HTML5上传图片预览 请选择图片文件:JPG/GIF //hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建...
  • mrjiaxing
  • mrjiaxing
  • 2015年09月17日 15:16
  • 2031

Ajax学习笔记

Ajax学习 1、什么是Ajax? 2、Ajax传输的3种方式; 3、小例子
  • hello19888
  • hello19888
  • 2016年01月25日 20:47
  • 417

Java 调用 FFMPEG 命令时用 url 作为输入源,Linux 下出现 “no such file or directory” 问题的解决

Windows 下执行 ffmpeg 命令,         D:/tools/ffmpeg/bin>ffmpeg.exe -i "某视频文件下载URL" -f flv D:/1.flv     ...
  • defonds
  • defonds
  • 2013年04月28日 15:27
  • 9249

最新抓取淘宝价格数据,图片标题的就更好抓了整合就好

抓取淘宝数据,图片没有做防盗链还有标题更好抓的,整合就行。抓了下价格...
  • GT219
  • GT219
  • 2015年08月05日 14:29
  • 1291

创建和使用URL访问网络上的资源

URL(Uniform Resource Locator)是统一资源定位符的简称,它表示Internet上某一资源的地址。   通过URL我们可以访问Internet上的各种网络资源,比如最常见...
  • u011955252
  • u011955252
  • 2016年11月27日 13:59
  • 982

iOS学习笔记之网络篇文件上传(复杂,详解)

**************************关于文件上传的总结************************** 1.环境:Xcode7 iOS9.0 2.info.plist的配置 NSA...
  • iphone5solo
  • iphone5solo
  • 2015年10月23日 22:04
  • 583

datatable的例子使用--增加删除修改查询

找到了datatable. datatable中文官网链接http://dt.thxopen.com/index.html  文本中用到的datatable主要是参照了:http://dt.thxop...
  • MonkeyProgirl
  • MonkeyProgirl
  • 2017年04月10日 09:04
  • 277

Java中的URL与FILE相互转化

首先,想比较一下这两者的不同。URL用于网络,所以带有明显的protocol,而且对于中文及符号支持的很不好。File就是我们平常系统中的文件路径了,对于中文及符号都支持,但是已经没有protocol...
  • hao707822882
  • hao707822882
  • 2014年10月31日 13:02
  • 388

java中URL和File的相互转化

url得到path:url.getPath(); 首先,想比较一下这两者的不同。URL用于网络,所以带有明显的protocol,而且对于中文及符号支持的很不好。File就是我们平常系统中的文件路...
  • xxx_v
  • xxx_v
  • 2015年05月20日 07:53
  • 242

java中URL和File的相互转化

首先,想比较一下这两者的不同。URL用于网络,所以带有明显的protocol,而且对于中文及符号支持的很不好。File就是我们平常系统中的文件路径了,对于中文及符号都支持,但是已经没有protocol...
  • wanglha
  • wanglha
  • 2015年05月21日 15:48
  • 284
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:图片上传预览
举报原因:
原因补充:

(最多只允许输入30个字)