推荐:功能强大的上传插件fileinput.js

2018-2-24    分类: 前端资源

jquery 上传 拖拽上传

 

部署:

<link href="bootstrap.min.css" type="text/css" rel="stylesheet">
 <link href="fileinput.min.css" type="text/css" rel="stylesheet">
 <link href="fileinput-rtl.min.css" type="text/css" rel="stylesheet">


 <script src="jquery.min.js"></script>
 <script src="bootstrap.min.js"type="text/javascript"></script>
 <script src="fileinput.js"type="text/javascript"></script>
 <script src="zh.min.js"></script>


<form enctype="multipart/form-data">
 <input id="input-44" type="file" multiple>
</form>




<script>
    //version 4.2.7以上版本可以这么写

    $(document).on('ready', function() {
        $("#input-44").fileinput({
            uploadUrl: 'http://www.baidu.com',  //还写具体上传地址才显示可拖拽区域
            language: 'zh', //设置语言
            allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
            uploadAsync: true, //默认异步上传
            showUpload:true, //是否显示上传按钮
            showRemove :true, //显示移除按钮
            showPreview :true, //是否显示预览
            showCaption:true,//是否显示长条标题
            browseClass:"btn btn-primary", //按钮样式
            dropZoneEnabled: true,//是否显示拖拽区域
            maxFileCount:10, //表示允许同时上传的最大文件个数
            enctype:'multipart/form-data',
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!",
            msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!', //错误提示
            uploadExtraData:{"id": 1, "fileName":'123.mp3'},//上传携带参数
            maxFileCount:10, //表示允许同时上传的最大文件个数
            maxFileSize:0,//单位为kb,如果为0表示不限制文件大小
        }).on("filebatchselected", function(event, files) {  //选中要上传的文件后回调
           $(this).fileinput("upload");  //自动上传

        }).on("fileuploaded", function(event, data) {
            if(data.response)
            {
                alert('处理成功');
            }
        });

        //filebatchuploadcomplete 文件全部都上传完成才回调
        //fileuploaderror  上传文件错误后回调
        //还有更多估计你自己看源码
    });
</script>

http://plugins.krajee.com/file-input

anli_upload