MyUpload上传详细参数以及使用文档请点击

页面需要引入

在页面上引入已下js文件就可以开始使用了


<!-- 引入jquery -->
<script src="/js/MyUpload/jquery/jquery-1.10.2.min.js"></script>
<!-- 引入百度上传 -->
<script src="/js/MyUpload/webuploader/webuploader.js"></script>
<!-- 引入MyUpload -->
<script src="/js/MyUpload/js/MyUpload.js"></script>

当前页面所有的上传，在上传成功时都会在浏览器控制台打印信息

单文件上传

支持拖拽上传、QQ截屏粘贴上传。上传文件达到上传上限页面上不会出现上传按钮了

    [
    ]

必传参数为 tokenPath、 server和 container 

                                
window.MYUPLOAD_PREFIX_URL = '/js/'; // 基础路径 用来指定MyUpload文件夹
var upload = new MyUpload({
    // 获取token的路径
    tokenPath: "http://192.168.0.165/seller/sys/sysToken/getToken.htm",

    // 文件上传到的服务器路径
    server: 'http://211.159.169.133:3000/upload',

    // 容器选择器
    container: '#container1',

    // 限制上传文件的大小（单个）
    fileSingleSizeLimit: 1 * 1024 * 1024,

    // 限制上传文件数量
    fileNumLimit: 10,
});
显示代码

多文件上传

                        [
                        ]

需要上传多个文件只需要修改 fileNumLimit 

                                                    
window.MYUPLOAD_PREFIX_URL = '/js/'; // 基础路径 用来指定MyUpload文件夹
var upload = new MyUpload({
    // 获取token的路径
    tokenPath: "http://192.168.0.165/seller/sys/sysToken/getToken.htm",

    // 文件上传到的服务器路径
    server: 'http://211.159.169.133:3000/upload',

    // 容器选择器
    container: '#container1',

    // 限制上传文件的大小（单个）
    fileSingleSizeLimit: 1 * 1024 * 1024,

    // 限制上传文件数量
    fileNumLimit: 10,
});
显示代码

多实例多文件上传

使用场景比如：商品的评价一个商品能上传多张图片，页面有多个商品评价。一个实例对应一个隐藏域多个地址逗号分隔

                        [
                        ]

可以在控制台 输入这三个方法 $('input[name="file20"]').val() , $('input[name="file21"]').val() , $('input[name="file22"]').val() 查看当前三个上传实例的隐藏域value值

                                                    
window.MYUPLOAD_PREFIX_URL = '/js/'; // 基础路径 用来指定MyUpload文件夹
for (var i = 20; i < 23; i++) {
    var upload = new MyUpload({
        // 获取token的路径
        tokenPath: "http://192.168.197.52/upload/upload/getToken.htm",
        // 文件上传到的服务器
        server: 'http://192.168.197.52/upload/upload/webUploadServer.htm',
        // 容器Id
        container: '#container' + i,
        fileSingleSizeLimit: 1024 * 1024 * 5,
        fileNumLimit: 5,
        uploadSuccess: function (data, datas) {
            // 找到当前实例的隐藏域（自定义的，自己要能找到， 用来放置文件地址）
            var con_input = $(this.options.container).siblings('input');
            var value = con_input.val();
            if(value == '') {
                con_input.val(datas.path)
            } else {
                con_input.val(value + ',' + datas.path)
            }
            
        }
    });
}
显示代码

图片回显 不再上传

                        [
                        ]

回显使用实例名.init([])。 使用againUpload为false时回显不进行上传。 

                                                    
var upload5 = new MyUpload({
	// 获取token的路径
	tokenPath: "http://192.168.197.52/upload/upload/getToken.htm",

	// 文件上传到的服务器
	server: 'http://192.168.197.52/upload/upload/webUploadServer.htm',

	// 容器选择器
	container: '#container2',

	fileSingleSizeLimit: 1 * 1024 * 1024,

	fileNumLimit: 10,

	againUpload: true,

	uploadSuccess(wufile, response) {
		console.log(response)
		console.log('多文件上传, "WUfile"对象是web upload提供的')
	}

});
显示代码

上传文件

                        [
                        ]

上传文件设置accept属性为'file'。 

                                                    
var upload5 = new MyUpload({
	// 获取token的路径
	tokenPath: "http://192.168.197.52/upload/upload/getToken.htm",

	// 文件上传到的服务器
	server: 'http://192.168.197.52/upload/upload/webUploadServer.htm',

	// 容器选择器
	container: '#container2',

	fileSingleSizeLimit: 1 * 1024 * 1024,

    fileNumLimit: 10,

    accept: 'file',

	againUpload: true,

	uploadSuccess(wufile, response) {
		console.log(response)
		console.log('多文件上传, "WUfile"对象是web upload提供的')
	}

});
显示代码