demo http://plugins.krajee.com/file-input-ajax-demo/3
github 资源 https://github.com/kartik-v/bootstrap-fileinput
- <input id="input-700" name="kartik-input-700[]" type="file" multiple class="file-loading"> <!-- 必须的 -->
- <div id="kv-error-1" style="margin-top:10px;display:none"></div>
- <div id="kv-success-1" class="alert alert-success fade in" style="margin-top:10px;display:none"></div>
js
- <link rel="stylesheet" href="../libs/bootstrap-fileinput-4.4.3/CSS/fileinput.min.css">
- <script src="../libs/bootstrap-fileinput-4.4.3/js/fileinput.min.js"></script>
- <script src="../libs/bootstrap-fileinput-4.4.3/js/locales/zh.js"></script>
- <script>
- $("#input-700").fileinput({
- uploadUrl: rootPath+' ', // server upload action
- language:'zh',
- minFileCount: 0,
- uploadAsync: true,
- maxFileCount: 10,
- enctype: 'multipart/form-data',
- maxFileSize:5120,// 限制上传大小 KB
- // overwriteInitial: false,// 不覆盖已上传的图片
- allowedPreviewTypes:['image', 'html', 'text', 'video', 'audio', 'flash','object'],
- // allowedFileExtensions: ['jpg', 'png', 'gif'],// 可以可选择的违建格式
- // elErrorContainer: '#kv-error-1',// 错误显示的文本 continner
- showBrowse: true,
- browseOnZoneClick: true,
- ajaxSettings:{
- contentType:false
- }
- }).on("filepredelete", function(jqXHR) {
- var abort = true;
- if (confirm("确定删除此图片?")) {
- abort = false;
- }
- return abort; // 您还可以发送任何数据 / 对象, 你可以接收 ` filecustomerror
- }).on('filebatchpreupload', function(event, data) {
- var n = data.files.length, files = n> 1 ? n + 'files' : 'one file';
- if (!window.confirm("确定上传选择的文件吗 ?")) {
- return {
- message: "上传失败!", // upload error message
- data:{} // any other data to send that can be referred in `filecustomerror`
- };
- }
- }).on('fileuploaded', function(event, data, id, index) {// 上传成功之后的处理
- console.log(data)
- inputFiles.push(data.response.data.id[0]);
- var fname = data.files[index].name,
- out = '<li>' + '文件 #' + (index + 1) + '-' + fname + '上传成功!' + '</li>';
- $('#kv-success-1 ul').append(out);
- $('#kv-success-1').fadeIn('slow');
- }).on('filebatchpreupload', function(event, data, id, index) {
- $('#kv-success-1').html('<h4> 上传状态 </h4><ul></ul>').hide();
- })
- </script>
来源: http://www.bubuko.com/infodetail-2164816.html