<!----html頁面-->
<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8"?/>
<meta?http-equiv="X-UA-Compatible"?content="IE=edge">
<title>上傳文件</title>
<meta?name="viewport"?content="width=device-width,?initial-scale=1">
</head>
<body>????
文件:<input?type="file"?multiple?id="fileList">
<br>
<table?border="2">
<caption>文件詳情</caption>
<thead>
<tr>
<th>文件名</th>
<th>類型</th>
<th>大小(/kb)</th>
<th>上傳</th>
<th>下載</th>
</tr>
</thead>
<tbody?id="content">????????????????
</tbody>
</table>
<div?id="content">
</div>
<script?src="ajax.js"></script>
<script>
let?files=document.getElementById('fileList'),
content=document.getElementById('content'),
arr=['name','type','size'],
index=0;
fileArr=[];//存儲文件
files.onchange=function(event){
let?files=this.files,
len=files.length;
if(len){
for(let?f=0;f<len;f++){????????????????????
let?file=files[f],????????????????????????????????????????
tr?=?content.insertRow(index++);????????????????????????????????
for?(let?x?=?0;?x?<?5;?x++)?{????????????????????????????
let?td?=?tr.insertCell(x);??????????????????????????????????????????????????????????
if(x>=arr.length){
??if(x==3)td.innerHTML='<a?href="javascript:;"?id="'+index+'"?onclick="up()">上傳</a>';
??if(x==4)td.innerHTML='<a?href="javascript:;"?onclick="down()">下載</a>'
}else{
td.innerHTML?=?file[arr[x]];
}??????????????????????????????????????????????????????????
}
fileArr.push(file);
}
}????????????
}
function?up(){
??let?index=(event.target.id)-1,
data=fileArr[index],
url='http://localhost:7000/upload';
ajax({
url:url,
data:data
})
}
</script>
</body>
</html>
ajax頁面
==========================================
function?ajax(obj)?{
????let?{url,data}=obj;
????if?(XMLHttpRequest)
????????xhr?=?new?XMLHttpRequest();
????else?if?(ActiveXObject){
????????xhr?=?new?ActiveXObject('Micorsoft.HTTP');?
????}???????????????
????????xhr.open('post',?url,?true);?
????????xhr.setRequestHeader('Content-Type',?'application/x-www-form-urlencoded');
????????//xhr.send(data);?????????????????
????
???let?reader?=?new?FileReader(),?type?=?data.type;
????console.log(type)
????if?(data.type.indexOf('text')?>?-1)//文本文件
????????reader.readAsText(data);
????else?if?(data.type.indexOf('image')?>?-1)//圖片文件
????????reader.readAsDataURL(data);
????reader.onload?=?function?()?{????????
????????xhr.send(`name=${data.name}&type=${data.type}&file=${reader.result}`);
????}?
????????xhr.onreadystatechange?=?function?()?{
????????if?(xhr.readyState?==?4)?{
????????????if?(xhr.status?==?200?||?xhr.status?==?304)?{
????????????????alert(xhr.responseText)
????????????}
????????}
????}
}
<!--后端服務器nodejs-->
=================================================================
const?express?=?require('express'),
????bodyparser?=?require('body-parser'),
????fs?=?require('fs'),
????app?=?express();
app.use(bodyparser.json({?limit:?'50mb'?}));
app.use(bodyparser.urlencoded({?limit:?'50mb',?extended:?true?}));
//判斷目錄是否存在
let?url?=?__dirname?+?'/temp_up/';
fs.exists(url,(exists)=>{
????if(!exists)fs.mkdir(url);
})
app.post('/upload',?(req,?res)?=>?{
????res.setHeader("Access-Control-Allow-Origin",?"*");
???????????let?{name,type,file}=req.body;???????????
????if?(type.includes('text')){
????????fs.writeFile(url+name,file,'utf-8',(err)=>{
????????????if(err)console.log('寫入失敗!')????????????
????????})
????}else?if(type.includes('image')){
????????file?=?file.substring(23);???????????????????
????????fs.writeFile(url+name,?file,?'base64',?(err)?=>?{
????????????????????//沒有報錯，圖片不正顯示，why???
????????????????????if?(err)?console.log(err)
????????})
????}
????res.send('success!')
????})????????
?????
app.listen(7000,?()?=>?{
????console.log('server?running?on?7000....');
})
//重點在服務端代碼中，圖片文件讀取后寫入文件顯示不出來，怎么辦？？？？
nodejs獲取圖片數據顯示不出來
什么鬼_呀你
2018-07-31 18:54:43
