推荐:功能强大的上传插件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 name="pic" 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表示不限制文件大小
            slugCallback:function(){}, //上传前的回调
            overwriteInitial: false, //false时,本身已存在的预览图,后面在上传就继续追加而不是覆盖原来的
            previewSettingsSmall:{image: {width: "100%", height: "100%", 'max-width': "auto",'max-height': "auto"}},  //修改之前上传的预览图
            previewSettings:{image: {width: "100%", height: "100%", 'max-width': "auto",'max-height': "auto"}},  //修改刚刚上传的预览图

            initialPreview:['<img src="1.jpg">','<img src="2.jpg">'], //初始化显示出预览图
            //initialPreviewAsData: true //为true时,initialPreview数组里面的html标签就不会解析,直接显示数据了
            initialPreviewConfig: [ //初始化预览图时,为预览图设置属性
             {
               caption: '名称1',// 预览图展示的图片名称
               width: '120px',// 图片高度
               url: 'http://localhost/1.php',//删除预览图片的回调,返回的必须是json否则删除预览图的效果就没有
               key: '1a',// 删除按钮会添加data-key="1a",同时也会提交给后台key:'1a'值
               extra: {id: 11} //调用删除路径所传参数 
             },
             {
               caption: '名称2',
               width: '120px',
               url: 'http://localhost/1.php',
               key: '2a',
               extra: {id: 22}
             }
            ]
        }).on("filebatchselected", function(event, files) {  //选中要上传的文件后回调
           $(this).fileinput("upload");  //自动上传

        }).on("fileuploaded", function(event, data) {
            if(data.response)
            {
                alert('处理成功');
            }
        }).on('filedeleted', function() {
             console.log(1111) //删除预览图的回调
        });

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

 

动态生成添加预览图

预览图动态增、删其实是对属性initialPreview、initialPreviewConfig的操作,之后还需要打其刷新。

$("#input-44").fileinput('refresh', {
   initialPreview: [ //预览图片的设置
       "<img src='" + imageurl + "' class='file-preview-image' alt='肖像图片' title='肖像图片'>",
   ],
});

如果对配置进行操作后无法正常显示可以尝试监听执行refresh方法

 

红色提示要注意否则会造成上传无法成功

所有属性的设置案例:http://plugins.krajee.com/file-input/plugin-options#previewZoomSettings

 

中文参考:https://blog.csdn.net/u012526194/article/details/69937741

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

anli_upload