文件上传触发
相应的JS(为了方便 用JQ写法):
//上传文件函数
function onChange(){
//获取上传的图片的相应数据
var formData=(“#upload”)[0].files[0];
//本地相对路径,用来判断格式
var value=(“#upload”).val();
//限制文件类型
if (value == null||value == “”){ //如果路径错误
alert(“请选择要上传的图片!”);
return false;
}
if (value.lastIndexOf(‘.’)==-1){ //如果不存在”.”
alert(“路径不正确!”);
return false;
}
var AllImgExt=”.jpg|.jpeg|.gif|.bmp|.png|”; //限制图片的格式
var extName = value.substring(value.lastIndexOf(“.”)).toLowerCase();
if(AllImgExt.indexOf(extName+”|”)==-1){
$.toast(“文件类型出错”);
return false;
}
//图片AJAX上传 用原生的写法,兼容移动端
var form = new FormData();
form.append(“file”, formData);
var xhr = new XMLHttpRequest();
xhr.open(“post”, “url”, true);
xhr.onload = function (result){
var datas=eval(“(“+result.currentTarget.response+”)”);//这是返回结果为字符串,转出数组
//try catch为服务器传回乱码来预防错误
try{
if(datas.status==true){
}
else{
alert(“图片上传失败,请重试!”)
}
}catch (e){
}
}
xhr.send(form);//这个别漏了。。
}
最后需要说明下:现在这么写有个问题,就是第一次点击input,打开选择文件框,但是你点击取消的时候 onChange()事件不会触发,只有第一次选择图片上传之后后续的打开文件选择框,再点击取消也能触发onChange()事件。日后再完善!
应用在移动端网页的图片上传功能(纯手写)
最新推荐文章于 2018-11-21 14:25:33 发布