一、使用步骤
①引入文件
②html部分
A、写一个上传的按钮
B、写一个隐藏的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启动项目,否则也会回调不成功的