使用<input type="file"/> 文件上传,默认的样式非常难看,
今天要改变这个默认样式,其实也不是真的改变。css 无法 美化<input type="file"/>
方法就是隐藏input 标签,加上一些div button 使用css让你的页面变得美观
然后手动触发 input 的 click 事件;
html如下:楼主没有做美化工作,自行完成
<form id="mf" action="/upfile" method="POST" enctype="multipart/form-data">
<div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" >Click to upload!</div>
<!-- hide input[type=file]!-->
<div style='height: 0px;width:0px; overflow:hidden;'>
<input id="upfile" type="file" accept="image/*" multiple="multiple" name="upload"/></div>
<input id="submit" type="submit" value='submit' >
</form>
js代码
var btn = document.getElementById("yourBtn");
var upfile = document.getElementById("upfile");
var submit = document.getElementById("submit");
var form = document.forms[0];
//手动触发input[type=file] click 事件
btn.addEventListener('click',function(){
if(document.createEvent){//ff chorme
var ev = document.createEvent('MouseEvents');
ev.initEvent('click',true,true);
upfile.dispatchEvent(ev);
}else{//ie
upfile.click();
}
});
</pre>使用$.ajax + FormData上传<p></p><p><span style="font-size:24px"></span></p><pre name="code" class="javascript"> submit.addEventListener('click',function(e){
e.preventDefault();
var fm = new FormData();
var files = upfile.files;
for (var i = 0; i<files.length; i++) {
fm.append('f'+i,files[i]);
}
console.dir(fm);//log、dir出来的貌似是空{},不用担心只是我们看不到内容,实际append成功
$.ajax({
type:"post",
url:"/upfile",
data:fm,
processData: false,//因为data值是FormData对象,不需要对数据做处理
contentType: false,//
success:function(d){
console.log(d);
},
error:function(){
alert('error upfile');
}
});
});
服务器代码nodejs express
// upfile.js
var multiparty = require('multiparty');//express下处理enctype=form-data //Parse http requests with content-type multipart/form-data
var path = require('path');
var fs = require('fs');
module.exports = function (req,res) {
// body...
var form = new multiparty.Form({
autoFiles:true,
uploadDir:path.join(__dirname,'../updir-temp')
});
form.parse(req, function(err, fields, files) {
if(!err){
movefiles(files);
res.send('ok');
}
else res.send('flase');
});
}
function movefiles (files){
var date= (new Date()).getTime();
for (var i in files) {
var f = files[i][0],
newpath = path.join(__dirname,'../public/updir/')+date+i+f.originalFilename;
fs.rename(f.path,newpath,function(err){
if(err) console.dir( err);
// else console.log(f.originalFilename);
});
};
}
以上就是图片上传了