input type='file'上传图片限制大小,类型判断,以及原生js实现上传至后端前实现图片显
来源:互联网 发布:安捷伦66319d编程手册 编辑:程序博客网 时间:2024/06/06 21:01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="上传至后端路径" method="post" id="up_img">
<div id="imglist">
</div>
<div id="upBtn">
<input type='file' name='photos' class="upfile">
</div>
<input type="submit" value="submit"/>
</form>
</body>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
function createfile(){
$('#upBtn').append("<input type='file' name='photos' class='upfile'>");
}
function showimg(url){
var img='<img src="'+url+'"/>';
$('#imglist').append(img);
}
function addfile(){
var file = this.files[0];//上传的图片的所有信息
console.log(this.files[0]);
//首先判断是否是图片
if(!/image\/\w+/.test(file.type)){
alert('上传的不是图片');
return false;
}
//在此限制图片的大小
var imgSize = file.size;
console.log(imgSize);
//35160 计算机存储数据最为常用的单位是字节(B)
//在此处我们限制图片大小为2M
if(imgSize>2*1024*1024){
alert('上传的图片的大于2M,请重新选择');
$(this).val('')
return false;
}
//如果还想限制图片格式也可以通过input的accept属相限制,或者file.name属性值做判断
//建议使用accept属性,简单,方便。具体可以查看我的另一片文章
//将图片信息通过如下方法获得一个http格式的url路径
var objUrl = getObjectURL(this.files[0]);
console.log(objUrl+'url');
//blob:http://127.0.0.1:8020/6bf47c99-496b-4cc4-ae73-27aa06987036url
showimg(objUrl)
//showimg($(this).val());
//$(this).val()本地上传的图片的绝对路径无法实现Img现实的,要将其转换为http格式的路径方能实现显示
$(this).hide();
createfile();
$('.upfile').bind('change',addfile);
}
$('.upfile').bind('change',addfile);
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) { //
url = window.createObjectURL(file);
} else if (window.URL != undefined) {
//仅简单的验证仅如下的浏览器支持 webkit or chrome ie11 ie10 firefox oprea
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
};
/*var objUrl = getObjectURL(this.files[0]) ;
if (objUrl) {
imgSrc.attr("src", objUrl);//给予jquery也可以如此使用
}*/
// URL对象是硬盘(SD卡等)指向文件的一个路径,如果我们做文件上传的时候,想要在图片没有上传服务器端的情况下
// 看到上传图片的效果图的时候就可是以通过var url=window.URL.createObjectURL(obj.files[0]);
// 获得一个http格式的url路径,此时候就可以设置到<img src="+url+">中显示了。window.webkitURL和window.URL是一样的,
// window.URL标准定义,window.webkitURL是webkit内核的实现(一般手机上就是使用这个)。
});
</script>
</html>
做项目时遇到了图片上传的问题,就专门学习了下,经查阅,总结得到如上实例,如上的结果都已经验证。
由于时间原因就简单粘贴图片了,错误之处请批评指正。谢谢
- input type='file'上传图片限制大小,类型判断,以及原生js实现上传至后端前实现图片显
- Html input(file)实现图片的上传 判断图片的大小和类型
- html5 中input type=‘file’实现文件图片等的上传的文件类型限制
- js实现判断图片上传判断大小
- 简易上传图片原生input-file实现方案
- input标签type="file"的格式要求,以及文件阅读,图片上传前的显示
- [js实例] input type=file 上传图片预览 createObjectURL
- JS实现点击某张图片弹出上传图片窗口以及限制图片格式和大小
- js在上传图片前判断大小
- js在上传图片前判断大小
- js在上传图片前判断大小
- js在上传图片前判断大小
- input[type='file'] img图片上传
- js限制input file文件上传的大小和类型
- input标签上传图片到后端前用H5的FileReader 方法实现图片的显示
- 使用js实现上传图片的大小限制
- js 实现 <input type="file" /> 文件上传
- 关于 input【type=file】文件上传控件实现自定义文字及实时图片预览
- ScrollView嵌套RecyclerView出现的滑动以及显示异常的处理
- 九度OJ题目1113:二叉树
- 【FastDev4Android框架开发】RecyclerView完全解析之下拉刷新与上拉加载SwipeRefreshLayout(三十一)
- Flex布局
- http协议
- input type='file'上传图片限制大小,类型判断,以及原生js实现上传至后端前实现图片显
- 自定义注解 @interface
- JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度
- Lightoj1261——1261
- 数据库自动化运维平台--元数据平台
- 数学3
- 2017 Wuhan University Programming Contest (Online Round) E. Lost in WHU(矩阵快速幂)
- OpenGL Shader简单例子
- linq中如何随机获取数据