一、使用步骤
①引入文件
<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
<script type="text/javascript" src="js/jquery.form.js" ></script>
②html部分
A、写一个上传的按钮
<div class="mui-input-row">
<label>现场照片</label>
<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined btn_cust">上传图片或视频</button>
</div>
B、写一个隐藏的form表单，这个才是真正的上传组件
<form action="http://192.168.41.12:80/upload-single" enctype="multipart/form-data" method="post" id="upload" style="display:none;">
<input type="file" id="fileupload" name="myfile" />
</form>
③js部分
A、用js触发隐藏的input
$(".mui-input-group").on('click','.btn_cust',function(){
$('#fileupload').click();
return;
})
B、用js监听input改变，并使用 ajaxSubmit模拟表单提交
$('#fileupload').change(function() {
jQuery("#upload").ajaxSubmit({
dataType:'text',
success:function(_data) {
var data = JSON.parse(_data)
//这里处理返回的结果
})
});
二、使用nodejs写一个上传文件的接口【下面的代码直接可以用，应该不难看懂】
var express = require('express'); //引入express模块
var app = express(); //创建应用
var allowCors = function(req, res, next) {
res.header('Access-Control-Allow-Origin', req.headers.origin);
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
res.header('Access-Control-Allow-Headers', 'Content-Type');
res.header('Access-Control-Allow-Credentials', 'true');
next();
};
app.use(allowCors); //使用跨域中间件
//定义public路径
var pub = __dirname + '/public';
app.use(express.static(pub)); //设置静态目录为pubic
//npm install multer --save
var multer = require('multer');
var storage = multer.diskStorage({
//设置上传后文件路径，"d:/myapp/public/uploads文件夹"会自动创建。
destination: function(req, file, cb) {
cb(null, './public/uploads')
},
//给上传文件重命名，获取添加后缀名
filename: function(req, file, cb) {
var fileFormat = (file.originalname).split(".");
cb(null, file.fieldname + '-' + Date.now() + "." + fileFormat[fileFormat.length - 1]);
}
});
var upload = multer({ storage: storage })
//访问路径
//http://localhost
//返回提交文件页面。
app.get('/', function(req, res) {
res.sendFile('./upload.html', { root: __dirname });
});
//单文件上传获取信息
app.post('/upload-single', upload.single('myfile'), function(req, res, next) {
var file = req.file;
console.log("original file name is " + file.originalname); //original file name is 20170615_211619.jpg
console.log("file name is " + file.filename); //file name is myfile-1511013577361.jpg
res.send(JSON.stringify({ ret_code: 0, _msg: file.filename })); //这行代码必须要有，否则Browser会处于wait状态。
})
app.use(function(err, req, res, next) {
res.send(err.stack);
});
app.listen(80);
console.log('Express started on port 80');
三、ie9图片上传成功，但是没有回调
ie9只能接口text，如果返回JSON对象的数据，ie9以下无法获取
解决方案：在请求中加上：dataType:'text',
出现这个问题：$(…).ajaxSubmit is not a function
原因总结：
①jquery与jquery.form引入顺序错了
②项目中jquery冲突（多处引入jquery）
注意点
ie9下面，项目不要使用127.0.0.1这样来启动，而是使用自己的ip启动项目，否则也会回调不成功的