在web开发中上传图片是一个很常见的操作，本文简单介绍一下通过jQuery结合html5中的一些新标签实现图片上传和客户端预览。
项目地址: github
** 效果图 **
1.png
主要是用到的插件
- web开发框架express
- nodemon插件,实现服务器端js修改后的自动重启
- gulp实现浏览器端js代码的自动化构建
- jQuery
实现思路:客户端通过base64方式把图片上传到服务器端,服务器端解析数据转换成文件.客户端处理文件可以使用FileReader
//gulpfile.js
var gulp = require('gulp')
// nodemon服务器端js修改后重启服务
var nodemon = require('gulp-nodemon')
var browserSync = require('browser-sync').create()
var concat = require('gulp-concat'),
uglify = require('gulp-uglify')
//配置nodemon监听js、html文件的改变 重启node服务器
gulp.task('nodemon',function(){
nodemon({
ignore:['gulpfile.js','node_modules/','public/**/*.*'], //忽略不需要监视重启的文件
script:'index.js',
ext:'js html'
}).on('start',function(){
browserSync.init({
files:['public/**/*.*','views/**'],
proxy:'http://localhost:3000', //设置代理运行本地的3000端口
port:5000, //设置browser-sync的运行端口号
},function(){
console.log('浏览器已刷新')
})
})
})
gulp.task('dist',function(){
gulp.src(['./public/js/*.js'])
.pipe(concat('dist.js'))
.pipe(uglify())
.pipe(gulp.dest('./public/dist'))
})
gulp.task('default',['nodemon'])
<div id="upload">
<!--页面中创建一个隐藏的file标签-->
<input type="file" name="fileUpload" id="fileUpload" style="width:0;height:0">
<button id="fileOpenFolder"><i class="fa fa-folder-open-o"></i></button>
<button id="fileUploadAll"><i class="fa fa-upload"></i></button>
<div class="upload-container">
<ul id="h5ImgUploadList">
</ul>
</div>
</div>
//客户端js代码
$.fn.extend(
{
'h5Upload':function(){
var imgList = [] //保存图片的数据
//点击打开文件夹按钮 开始选择文件
this.find('#fileOpenFolder').click(function(){
$('#fileUpload').click()
})
var that = this
//向服务器端上传文件
this.find('#fileUploadAll').click(function(){
if(imgList.length == 0){
console.log('请选择要上传的图片文件')
return false
}
//把多张图片用@分割上传服务器端
var data = ''
that.find('img').each(function(){
data += $(this).attr("src")+"@"
})
$.ajax({
method:'post',
data:{imgData:data},
url:'/common/api/file_upload',
success:function(res){
console.dir(res)
},
error:function(err){
console.dir(err)
}
})
})
// 添加删除图片效果,点击删除按钮后删除指定位置的图片
$('#h5ImgUploadList').on('click','.del',function(){
var currentImgIndex = $('#h5ImgUploadList .del').index(this)
imgList.splice(currentImgIndex,1)
initImgHtml()
})
$('#fileUpload').change(function(){
imgList.push(this.files[0])
initImgHtml()
})
//图片选择之后渲染页面内容
function initImgHtml(){
$('#h5ImgUploadList').html('')
imgList.forEach(function(imgData){
var reader = new FileReader()
reader.readAsDataURL(imgData)
reader.onload = function(){
var $img = $('<li><img><i class="del fa fa-remove"></i></li>')
$img.find('img').attr('src',this.result)
$('#h5ImgUploadList').append($img)
$img.load(function(){
console.dir(this)
})
}
})
}
}
}
)
$('#upload').h5Upload()
//服务器端js代码 接收数据进行处理
app.post('/common/api/file_upload',(req,res)=>{
var imgDataArr = req.body.imgData
//console.log(req.body)
//为了防止文件同名,使用时间戳加随机数的方式命名文件
var imgList = []
imgDataArr.split('@').forEach(imgData=>{
if(imgData!=""){
var fileName = Date.now().toString()+Math.ceil(Math.random()*10000)+".jpg"
imgList.push("/upload/"+fileName)
//传递的数据进行替换
var base64Data = imgData.replace(/^data:image\/\w+;base64,/,"")
var dataBuffer = new Buffer(base64Data,'base64')
fs.writeFile('./public/upload/'+fileName,dataBuffer,err=>{
if(err){
console.log(err)
}
else{
}
})
}
})
res.json({
status:'y',
msg:'保存成功',
data:imgList.join(',')
})
})
