服務端
var http=require('http')
var fs=require('fs')
const formidable=require('formidable')
http.createServer((req,res)=>{
if(req.url=='/'){
fs.readFile('./index.html',(err,data)=>{
if(err)return;
res.end(data)
})
}
if(req.url=='/upload'){
const form=formidable.IncomingForm()
form.on('error',function(err){res.writeHead(500);res.end()}).
parse(req,function(error,fields,files){
for(var key in files){
var file=files[key]
fs.readFile(file.path,(err,data)=>{
fs.writeFile(key,data,(err,data)=>{
if(err)console.log(err)
})
})
}
res.writeHead(200)
res.end()
})
}
}).listen(4050)
客戶端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="file" id='input'>
<button>預覽圖片</button>
<button>上傳圖片</button>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
var $=jQuery;
var input=document.getElementById('input');
var btn=document.getElementsByTagName('button');
btn[0].onclick=function(){
console.log(input.files[0])
var reader=new FileReader()
reader.readAsDataURL(input.files[0])
reader.onload=function(e){
var img=new Image()
img.width=400
img.height=400
img.src=this.result;
img.onload=function(){
document.body.appendChild(img)
}
}
}
btn[1].onclick=function(){
var formData=new FormData()
formData.append(input.files[0].name,input.files[0])
console.log(input.files[0].name)
console.log(input.files[0])
$.ajax({url:'/upload',
type:'post',
data:formData,
contentType:false,
processData:false,
success:function(){alert('上傳成功')},
error:function(){alert('上傳失敗')}
})
}
</script>
</body>
</html>