<input type="file"/> 文件上传

最新推荐文章于 2024-09-11 15:07:58 发布

mjiang1000

最新推荐文章于 2024-09-11 15:07:58 发布

阅读量790

点赞数 1

文章标签： input标签 JavaScript nodejs 文件上传

本文链接：https://blog.csdn.net/mjiang1000/article/details/48373045

版权

使用<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);
		});
	};
}

以上就是图片上传了