上传单张图片

最新推荐文章于 2021-03-24 10:30:17 发布

七月的岁月童话

最新推荐文章于 2021-03-24 10:30:17 发布

阅读量409

点赞数

分类专栏： demo 文章标签：上传单张图片图片

demo 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

上传单张图片

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>单张传图</title>
</head>
<body>
<input type="file" id="img"><!--accept="image/gif, image/jpeg" 只接受gif/jpeg-->
<button id="up_btn">上传</button>
<img id="img_show" alt=""/>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script> 
var ireg = /image\/.*/i;//来判断文件的类型，当前面加了accept="images/*"时就可以不加这里的判断的，因为accept作用在选择的时候，去掉不符合的文件了
var img_index;
//选图的时候
$('#img').bind('change',function(){
var file = this.files[0],
type = file.type, 
size = file.size; 
if(!type.match(ireg)) { 
alert('请选择图片！');//判断文件类型
}
if(size>1024*1024*2) { 
alert('图片不可大于2MB！');//判断文件大小
}
img_index = file;
});
//上传的时候
$("#up_btn").click(function(){
var img = $("#img").val();
if(!img){
alert("请先选择上传对的图片！");
return false;
}else{
if(!img_index.type.match(ireg)){
alert('请选择图片！');
return false;
}
if(img_index.size>1024*1024*2) { 
alert('图片不可大于2MB！'); 
$('#img').val("");
return false;
}
//发送的地址
var xmlhttp; 
if (window.XMLHttpRequest) { 
//IE7+, Firefox, Chrome, Opera, Safari 
xmlhttp = new XMLHttpRequest; 

//针对某些特定版本的mozillar浏览器的bug进行修正 
if (xmlhttp.overrideMimeType) { 
xmlhttp.overrideMimeType('text/xml'); 
}; 
} else if (window.ActiveXObject){ 
//IE6, IE5 
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
//上传返回
if(xmlhttp.upload){ 
//onreadystatechange是每次 readyState 属性改变的时候调用的事件句柄函数 
xmlhttp.onreadystatechange = function(e){ 
if(xmlhttp.readyState==4){ 
if(xmlhttp.status==200){ 
var data = eval('(' + xmlhttp.responseText + ')'); 
if(data.code == 1){ 
//自定义code==1为成功 把返回地址写到img的src中便可看到图片
//alert(data.data);
$("#img_show").attr("src",data.data);
}else{
alert('图片上传失败！');
}
}else{ 
alert('图片无法上传！');
}
} 
}; 

//3.设置连接信息 
//初始化HTTP请求参数，但是并不发送请求。 
//第一个参数连接方式，第二是url地址,第三个true是异步连接，默认是异步 
//使用post方式发送数据 
xmlhttp.open("POST","/file/createfile",true); 

//4.发送数据，开始和服务器进行交互 
//发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求中如果true, send这句话会立即执行 
//如果是false（同步），send会在服务器数据回来才执行 
//get方法在send中不需要内容 
var formdata = new FormData(); 
formdata.append("file", img_index); 
xmlhttp.send(formdata); 
} 
} 
})
</script>
</body>
</html>