在web開發(fā)中上傳圖片是一個很常見的操作，本文簡單介紹一下通過jQuery結(jié)合html5中的一些新標(biāo)簽實現(xiàn)圖片上傳和客戶端預(yù)覽硬梁。
項目地址: github
** 效果圖 **
1.png
主要是用到的插件
- web開發(fā)框架express
- nodemon插件,實現(xiàn)服務(wù)器端js修改后的自動重啟
- gulp實現(xiàn)瀏覽器端js代碼的自動化構(gòu)建
- jQuery
實現(xiàn)思路:客戶端通過base64方式把圖片上傳到服務(wù)器端,服務(wù)器端解析數(shù)據(jù)轉(zhuǎn)換成文件.客戶端處理文件可以使用FileReader
//gulpfile.js
var gulp = require('gulp')
// nodemon服務(wù)器端js修改后重啟服務(wù)
var nodemon = require('gulp-nodemon')
var browserSync = require('browser-sync').create()
var concat = require('gulp-concat'),
uglify = require('gulp-uglify')
//配置nodemon監(jiān)聽js撞鹉、html文件的改變 重啟node服務(wù)器
gulp.task('nodemon',function(){
nodemon({
ignore:['gulpfile.js','node_modules/','public/**/*.*'], //忽略不需要監(jiān)視重啟的文件
script:'index.js',
ext:'js html'
}).on('start',function(){
browserSync.init({
files:['public/**/*.*','views/**'],
proxy:'http://localhost:3000', //設(shè)置代理運行本地的3000端口
port:5000, //設(shè)置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">
<!--頁面中創(chuàng)建一個隱藏的file標(biāo)簽-->
<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 = [] //保存圖片的數(shù)據(jù)
//點擊打開文件夾按鈕 開始選擇文件
this.find('#fileOpenFolder').click(function(){
$('#fileUpload').click()
})
var that = this
//向服務(wù)器端上傳文件
this.find('#fileUploadAll').click(function(){
if(imgList.length == 0){
console.log('請選擇要上傳的圖片文件')
return false
}
//把多張圖片用@分割上傳服務(wù)器端
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()
})
//圖片選擇之后渲染頁面內(nèi)容
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()
//服務(wù)器端js代碼 接收數(shù)據(jù)進行處理
app.post('/common/api/file_upload',(req,res)=>{
var imgDataArr = req.body.imgData
//console.log(req.body)
//為了防止文件同名,使用時間戳加隨機數(shù)的方式命名文件
var imgList = []
imgDataArr.split('@').forEach(imgData=>{
if(imgData!=""){
var fileName = Date.now().toString()+Math.ceil(Math.random()*10000)+".jpg"
imgList.push("/upload/"+fileName)
//傳遞的數(shù)據(jù)進行替換
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(',')
})
})
