reader.addEventListener("load",function () {
preview.src = reader.result;
},false);
if (file) {
reader.readAsDataURL(file);
}
}
javascript 部分
var preview = document.querySelector('#preview');
var files = document.querySelector('input[type=file]').files;
function readAndPreview(file) {
// 支持的图片类型（可自定义）
if ( /.(jpe?g|png|gif)$/i.test(file.name) ) {
var reader = new FileReader();
reader.addEventListener("load",function () {
var image = new Image();
image.height = 100;
image.title = file.name;
image.src = this.result;
preview.appendChild( image );
},false);
reader.readAsDataURL(file);
}
}
//files 就是input选中的文件，你也可以对上传图片个数进行限制 （files.length）
if (files) {
[].forEach.call(files,readAndPreview);
}
}
项目中运用
前端部分
html
javascript
js 方法部分拆开了下,放在一个代码块中有点长 （阅读时请查看上下文）
上传单个
文件
txtUploadFileList:$('#txtUploadFileList'),//
上传多个
文件
btnSend:$('#btnSend'),//
上传文件
preview:$('#preview'),//
图片预览盒子
//预览
图片加载
previewImgLoad:function(fileList){
for(var i=0;i
上传单个
文件
这里是input改变时后直接
上传(用于
修改用户头像)
你也可以在点击
上传按钮后再
上传,下面的多图
上传会给出案例
*/
upload.txtUploadFile.change(function(){
var formData = new FormData();
formData.append('avatar',upload.txtUploadFile[0].files[0]);
$.ajax({
url: '/upload/file',type: 'post',cache: false,data: formData,processData: false,contentType: false,success:function(res){
console.log('upload success');
},error:function(){
console.log('upload faild');
}
});
});
图片
upload.txtUploadFileList.change(function(){
var fileList=this.files;
upload.previewImgLoad(fileList);
});
上传多张
图片
upload.btnSend.click(function(){
var files = upload.txtUploadFileList.prop('files');
if(files.length==0){
//没有选择
文件直接返回
return;
}
var formData=new FormData();
for(var i=0;i
图片已经上传成功了.你可根据返回结果处理其他的业务逻辑
if(res.status==1){
// todo something
}
},error:function(){
console.log('upload faild');
}
});
});
nodejs 部分
nodejs 用的是Multer中间件，这个中间件主要用于上传文件
安装Multer
Multer在nodejs中使用
//磁盘存储引擎（说白了就是指定
上传的
文件存储到哪，当然你也可以对
文件重命名等等）
var storage=multer.diskStorage({
destination: function (req,file,cb) {
//我这里是存储在public下的uploads目录
cb(null,'public/uploads/')
},filename: function (req,cb) {
cb(null,file.fieldname + '-' + Date.now()+"_" + file.originalname)
}
});
单个图片上传
图片
上传成功会返回
图片的存储路径
app.post('/upload/file',upload.single('avatar'),function(req,res) {
if (!req.file) {
console.log("no file received");
return res.send({
status: 0,filePath:''
});
} else {
console.log('file received');
res.send({
status:1,filePath: '/uploads/' + path.basename(req.file.path)
});
}
});
多张图片上传
图片
上传成功会返回
图片的存储路径（数组）
app.post('/upload/filesList',upload.array('photos',9),res) {
if (req.files==undefined) {
console.log("no files received");
return res.send({
status: 0,filePath:''
});
} else {
var filesPathArr=[];
for(var i=0;i
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
