您的位置：首页 > Web前端 > JavaScript
使用javascript 和 $.ajax 实现文件（图片）上传。

2019-04-22 00:40 36 查看
[code]<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo1</title>
</head>
<body>
<input type="file" id="file">
<button type="button" οnclick="submit(this)">提交</button>

<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script>
function submit(button){
//把当前的button对象传入到函数里来，目的是使用户点击提交按钮后，把提交按钮禁用掉，防止用户重复提交文件。

//获取input 对象
let file = document.getElementById("file");

if(!file.value){
//检查input对象里的value属性，如果没有选择上传文件，value会等于空字符串。
return  false;
}

let image = file.files[0]; //获取input 对象里的文件对象

//上传之前需要对文件进行检验

let type = image.type; //文件对象里的type属性是文件的类型。
let size = image.size; //文件对象里的size属性是文件的大小。
let name = image.name; //文件对象里的name属性是文件的名字。
let suffix = name.substr(name.lastIndexOf(".")+1); //获取文件名后缀。
//字符串对象的 lastIndexOf 方法，返回参数在字符串中最后一次出现的下标。
//字符串对象的 substr 方法，返回指定下标之间的字符串。

let allowSize = 5242880;  //上传文件大小允许的最大值，单位是b，我这里设置成5242880b，即5mb。
let allowType = ["image/jpeg","image/jpg","image/png"]; //上传文件允许的类型，我这里设置允许上传三个类型。
let allowSuffix = ["jpeg","png","jpg"]; //上传文件允许的后缀名。

if(size>allowSize){
return false;
}

if(allowType.indexOf(type)===-1){
//数组对象的 indexOf 方法可返回参数在数组中首次出现的位置，如果没找到则返回-1。
return false;
}

if(allowSuffix.indexOf(suffix.toLowerCase())===-1){
//因为 indexOf 方法对参数大小写敏感，所以需要对获得的后缀名转换成小写。
return false;
}

button.disabled= "disabled";//禁用掉按钮。

let formData = new FormData(); //创建 一个空的 FormData 对象
formData.append("image",image);
// 在FormData对象里的append方法写入2个参数，第一个参数是规定上传文件的名字，
// 服务端以这个名字接收文件，拿php举例，比如这里写的是image，后台就要这样写
// $image = $_POST['image'];
// 文件一般都是以POST方式提交的，因为POST方式对文件大小和类型没有限制，GET对文件大小和类型都有限制。
// 第二个是前面获得的文件对象。
formData.append("session","abcwqewavzxvzxvasdweqewwqq");
//还可以添加其他的东西，比如如果需要用户登录才可以上传图片的话，这里可以添加一个session ID 用来验证用户信息，我这里的session 值是乱写的。

$.ajax({
url:"demo1.php",//提交到服务端的脚本。
type:"post",//文件一般都是以POST方式提交的，因为POST方式对文件大小和类型没有限制，GET对文件大小和类型都有限制。
data:FormData,//data的值是前面的FormData对象。
contentType:false,//如果不设置成false,这里会用默认的application/x-www-form-urlencoded; charset=UTF-8，这是不行的。
processData:false,//是否对data里的数据进行序列化处理，填false。
dataType:"json",//我的服务端的返回值是json格式的，所以这里我填了json。
success:function(e){
//请求成功时执行的函数
button.removeAttribute("disabled");//把按钮的禁用属性移除
},
error:function(e){
//发生错误时执行函数
button.removeAttribute("disabled");//把按钮的禁用属性移除
}
})

}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航