使用ajaxSubmit上传文件总结

一、使用步骤

①引入文件

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