最简单的图⽚上传实例<form enctype="multipart/form-data" method="post">
<input type="file" id="avatar" name="avatar"/>
<button>提交</button>
</form>
<script>
$('button').click(function () {
var files = $('#avatar').prop('files');
var data = new FormData();
data.append('avatar', files[0]);
$.ajax({
url: 'localhost:3000/uploadImg',
type: 'POST',
data: data,
cache: false,
processData: false,
contentType: false
});
return false;
});
</script>
好了，完事了。
如果你是全栈⼯程师，后台也是你搭的。下⾯是后台的代码。这⾥采⽤node.js。
⾸先要npm install multer --save
let multer = require('multer')
let storage = multer.diskStorage({
destination : (req,file,cb)=>{
//保存在public⽂件夹的upload⽂件夹⾥
cb(null,path.join(__dirname, '../public/upload/'))
},
filename:(req,file,cb)=>{
cb(iginalname)
}
})
let upload = multer({ storage: storage })
//单⽂件上传
router.post('/', upload.single('avatar'), function (req, res, next) {
res.send({
code: 1, message: 'successs'
})
})
//多⽂件上传，配置信息是跟单个是⼀样的，只是到逻辑这⾥不⼀样。
router.post('/solutionPic', upload.array('avatar'), function (req, res) {
try{
let files = req.files;
/
/记录图⽚地址数组
let arr = [];
for(let i= 0;i<files.length;i++){
arr.push('/upload/solution/'+files[i].filename);
}
res.send({
code: 0, message: 'successs', data: arr
});
}catch(e){
console.log(e)
red.send({
code:9,message:e
})
ajax实例 文件浏览}
});