当前位置:首页 > Windows程序 > 正文

html5 api 实现文件上传

2021-03-16 Windows程序

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
  <input type="file"/>
  <img src=""/>
  <button>upload</button>
<script src="http://www.mamicode.com/static/js/jquery-3.0.0.min.js"></script>
<script>
$("input[type=file]").change(function(){
var FILELIST = this.files ;
console.log(FILELIST);
var READER = new FileReader();
READER.onload = function(e){
console.log(e.target.result);
$("#upload").attr("src",e.target.result); // 查看准备上传的图片
}
READER.readAsDataURL(FILELIST[0]);
// READER.readAsArrayBuffer(FILELIST[0]);
$("#publish").on("click",function(){ //点击上传按钮后
var reader = new FileReader();
var fd = new FormData();
var XHR = new XMLHttpRequest();
reader.onload = function(e){ console.log(e.target.result);
fd.append(‘myFile‘,FILELIST[0]);
XHR.onreadystatechange = function(res){
};



XHR.open(‘POST‘,"/upload.php",true);
XHR.send(fd);


}
reader.readAsBinaryString(FILELIST[0]);

})
});
</script>
</body>
</html>

html5 api 实现文件上传

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/61912.html