使用ajaxSubmit上传文件总结

一、使用步骤

①引入文件



②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启动项目,否则也会回调不成功的

你可能感兴趣的:(js)