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> //name="image_data[]" 一次性上传多图片 //多图上传 要将ajax设置成 同步 </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) //删除预览图的回调
}).on('filebatchpreupload', function (event, data) { //该方法将在上传之前触发
});
//filesuccessremove 删除刚刚上传成功图片的回调
//filebatchuploadcomplete 文件全部都上传完成才回调
//fileuploaderror 上传文件错误后回调
//filebatchpreupload 上传前回调
//还有更多估计你自己看源码
});
</script>
https://segmentfault.com/a/1190000018477200
动态生成添加预览图
预览图动态增、删其实是对属性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