文件上传下载，图片在线预览第二种方式，element手动上传

VIP文章 ghx123456ghx

已于 2022-12-23 11:31:05 修改

阅读量180

点赞数

文章标签： java spring

于 2020-08-20 09:42:59 首次发布

本文链接：https://blog.csdn.net/ghx123456ghx/article/details/108116149

版权

一文件上传

前台，使用layui或者自定义

 <button type="button" class="layui-btn" id="test1" ></button>
   var uploadInst = upload.render({
   
            elem: '#test1'
            , url: '${
   ctx}//upload'
            , accept: 'images'
            // , auto: false
            // , bindAction: '#btnUploadPicture'
            , size: 50000
            , before: function (obj) {
   
                if(applyPicPath != null && applyPicPath != ''){
   
                    this.data={
   'url': applyPicPath};
                }          
            }
            , done: function (res) {
   
                if(res.code == 0){
   
					alert("上传成功")
                }else{
   
                    return layer.msg('上传失败');
                }

            }
            , error: function () {
   
                //演示失败状态，并实现重传
                layer.alert("上传失败");
            }
        });

自己制作前台上传

 <input id="uploadPoto" style="display: none"  class ="upload-btn" type="file"  />
<div id="uploadBase" class="layui-btn" ><i class="layui-icon layui-icon-upload-drag"></i>上传</div>
  //上传
$("#uploadBase").click(function() {
   				
		$('#uploadPoto').trigger('click');					
		}
});
			  // 文件改变时 将文件名称显示到p元素中
			    $('#uploadPoto').on('change', function(event) {
   
			  
			    	if (this.files[0] == undefined || '' == this.files[0]) {
   
		                return false;
		            }
			    	var fileType = $("#fileType").val();
					var projectId = $("#project").val();
					var projectName = $("#project").find("option:selected").text();
					if(""==projectId){
   
						projectName = "";
					}
					var imagSize =  document.getElementById("uploadPoto").files[0].size;
					if(imagSize>1024*1024*50){
   
				    	alert("文件大小要求在50M以内");
				    	$("#uploadPoto").val("");
						return false;
				    }
					var loading = layer.load(0, {
   
	                    shade: true,
	                });
			        var formData = new FormData();
		 			formData.append('file',this.files[0]);  //添加图片信息的参数
			        formData.append("fileType", fileType);
			        formData.append("projectId", projectId);
			        formData.append("projectName", projectName);
			        $.ajax({
   
			            url: "${ctx}/knowledgeBase/fileManage/uploadFile",
			            type: "post",
			            dataType: "json",
			            cache: false,
			            data: formData,
			            processData: false,// 不处理数据
			            contentType: false, // 不设置内容类型
			            success: function (data) {
   
			            	layer.close(loading);
			                if(data.success == true){
   
			                	layer.alert("上传成功");
			                }