最近下项目中使用的bootstrap文件上传插件fileinput

最新推荐文章于 2021-05-07 11:26:52 发布

不负^_^遇见^_^

最新推荐文章于 2021-05-07 11:26:52 发布

阅读量171

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/weixin_45421417/article/details/109116180

版权

本文详细介绍了在前端使用fileinput插件进行图片和视频上传的实现过程，包括上传成功后的处理、错误处理、文件删除以及编辑时的图片预览。文章指出，虽然fileinput插件因美观而选用，但配置复杂，需要谨慎操作。作者分享了一周的研究成果，包括关键代码示例和功能实现步骤。

摘要由CSDN通过智能技术生成

1.本项目使用fileinput插件的原因是因为ui好看满足客户需求，由于是重量级的配置起来非常不方便（使用前请仔细阅读https://blog.csdn.net/u012526194/article/details/69937741）比较layui 这个太难了
2.上传图片

 $('#file-es').fileinput({
    uploadUrl: '/upload/upload',
    language: 'zh',
    maxFileCount:9,
    allowedFileExtensions: ['jpg', 'gif', 'png']
}).on("fileuploaded", function (event, data, previewId, index) { //上传成功返回给前端信息并生成input 隐藏标签 便于传值给后台
	var cunt=0;
	 for (let i = 0; i < data.files.length; i++) {
		 if (data.files[i]!==undefined){
		 	cunt++;
		 }

	 }
	layer.msg("上传成功"+cunt+"张")


	 var split = data.response.split(".");
	if(split[1]==="mp4"){
		var imginputm = '<input type="hidden" class="'+previewId+'" name="imgnamem" value="' + data.files[index].name+ '" previewId="'+previewId+'">';
		var imginputp = '<input type="hidden" class="'+previewId+'"name="imgnamep" value="' + data.response  + '" previewId="'+previewId+'">';
		$(".form-horizontal").append(imginputm);
		$(".form-horizontal").append(imginputp);
	}else {
		var imginput = '<input type="hidden" class="'+previewId+'" name="imgname" value="' + data.response + '" previewId="'+previewId+'">';
		var imginputs = '<input type="hidden" class="'+previewId+'" name="imgnames" value="' + data.files[index].name + '" previewId="'+previewId+'">';
		$(".form-horizontal").append(imginput);
		$(".form-horizontal").append(imginputs);
	}


}).on('fileerror', function(event, data, msg) {


 }).on('fileuploaderror', function(event, data, previewId, index){   //上传视屏限制时长后台异常处理 返回给前端的信息
	 //该方法将在上传出現異常触发

	 $("pre").text(JSON.parse(data.jqXHR.responseText).message);
	 }).on('filesuccessremove', function( event, id,data,previewId,key,fileindex) { //删除上传成功的图片只是删数据库的地址   没有删除服务器上的地址

     var ids="."+id
       $(ids).remove()

 }).on("filebatchselected", function(event, files) { //上传前事件

	  $(".fileinput-remove-button").hide()
	 $(".fileinput-upload-button").hide()
 });

3编辑图片
//生成一个json 数据生成要显示的图片
var coursrimgid=$("[name=‘id’]").val();
var jQuerys = $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots= 1; var kk=$ ("[name=‘imgnameps’]")[0].attributes.dd.value;
if (kk!undefined){
var names=kk.split(",");
for (let i = 0; i <names.length; i++) {
if (imgpz == “[”) {
var mp4x=names[i].split(".")
if(mp4x[1]=‘mp4’){
imgpz += ‘{type: “video”, filetype: “video/mp4”,caption:"’ + names[i] + ‘",url: "/courseImg/onepes?name=’ + names[i] + ‘"+"&coursrimgid=’ + coursrimgid + ‘",key:"’ + (num - 1) + ‘"}’;
}else {
imgpz += ‘{caption:"’ + names[i] + ‘",url: "/courseImg/onepes?name=’ + names[i] + ‘"+"&coursrimgid=’ +coursrimgid + ‘",key:"’ + (num - 1) + ‘"}’;
}
} else {
var mp4x=names[i].split(".")
if(mp4x[1]===‘mp4’){
imgpz += ‘,{type: “video”, filetype: “video/mp4”,caption:"’ + names[i] + ‘",url: "/courseImg/onepes?name=’ + names[i] + ‘"+"&coursrimgid=’ + coursrimgid + ‘",key:"’ + (num - 1) + ‘"}’;
}else {
imgpz += ‘,{caption:"’ + names[i] + ‘",url: "/courseImg/onepes?name=’ + names[i] + ‘"+"&coursrimgid=’ + coursrimgid + ‘",key:"’ + (num - 1) + ‘"}’;
}
}
num++;

			}
		}
		imgpz += "]";
		imgpz = eval('(' + imgpz + ')')
	}
	$('#file-es').fileinput({
		uploadUrl: '/upload/upload',
		language: 'zh',
		maxFileCount:9,
		allowedFileExtensions: ['jpg', 'gif', 'png'],
		overwriteInitial: false,
		initialPreviewAsData: true,
		initialPreview: path,      //地址集合
		initialPreviewConfig: imgpz, //json信息集合
		validateInitialCount: true
	}).on("fileuploaded", function (event, data, previewId, index) {
		layer.msg("上传成功"+data.files.length+"张")
		var split = data.response.split(".");
		if(split[1]==="mp4"){
			var imginputm = '<input type="hidden" name="imgnamem" value="' + data.files[index].name+ '">';
			var imginputp = '<input type="hidden" name="imgnamep" value="' + data.response  + '">';
			$(".form-horizontal").append(imginputm);
			$(".form-horizontal").append(imginputp);
		}else {
			var imginput = '<input type="hidden" name="imgname" value="' + data.response + '">';
			var imginputs = '<input type="hidden" name="imgnames" value="' + data.files[index].name + '">';
			$(".form-horizontal").append(imginput);
			$(".form-horizontal").append(imginputs);
		}
	}).on('fileerror', function(event, data, msg) {


	}).on('fileuploaderror', function(event, data, previewId, index){
		//该方法将在上传出現異常触发

		$("pre").text(JSON.parse(data.jqXHR.responseText).message);
	}).on('filedeleted', function (event, key, jqXHR, data) {
		$($("[name='imgnames']")[key]).remove();
	}).on('filesuccessremove', function( event, id,data,previewId,key,fileindex) {
		var ids="."+id
		$(ids).remove()
	}).on("filebatchselected", function(event, files) {
		$(".fileinput-remove-button").hide() //隐藏多余的上传和删除按钮
		$(".fileinput-upload-button").hide()
	});;

总结：由于对前端知识了解太少，搞明白这个插件花费了我一个星期的时间