Jquery之Form表单保存字节流图片

最新推荐文章于 2021-05-30 19:12:55 发布

绣花针

最新推荐文章于 2021-05-30 19:12:55 发布

阅读量920

点赞数 1

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/mmake1994/article/details/84319040

jQuery 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个JSP页面中实现图片上传功能的方法，包括点击文本框触发文件选择、验证图片类型及尺寸，以及上传到MongoDB并自动填充路径的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最终效果，点击文本框后弹出文件浏览框，选择图片文件（会验证），上传服务器成功（这里用的MongoDB）后会返回一个路径值，自动填入文本框中

部分JSP页面

	<form id="companyForm"  method="post">
		<input id="dwImage"   type="text" name="dwimage" class="easyui-validatebox"/> 
	</form>
			<!-- 文件上传 -->
	<input type="file" name="companyFile" id="companyFile" style="display:none;" onChange="changeImg(this);" value="" />

图片上传JS

	<script type="text/javascript">
	//图片上传
			$('#dwImage').click(function(e) {   //点击
				$('#companyFile').click();
			});
			
			var imgTypeList = ["JPG","JPEG","BMP","PNG","GIF","PSD"];
			function changeImg(obj) {  //上传图片
				var formData = new FormData();
				if($(obj)[0].files.length == 0) {
					/* alert("请选择文件!"); */
					$.messager.alert('提示框','请选择文件!','warning');
					return false;
				}
				var fileName = $(obj)[0].files[0].name;
		        var isImg = false;
		        var fileType = fileName.split('.');
				fileType = fileType[fileType.length-1];
		        for(var i = 0;i < imgTypeList.length;i ++ ) {
		        	var theType = imgTypeList[i];
		        	if(theType.toUpperCase() == fileType.toUpperCase()) {
		        		isImg = true;
		        		break;
		        	}
		        }
		        if(!isImg) {
		        	/* alert("请上传图片文件!"); */
		        	$.messager.alert('提示框','请选择图片文件!','warning');
					return false;
		        }
		        formData.append('file', $(obj)[0].files[0]);
		        $.ajax({
		           url : '<%=contextPath %>/admin/companyController/uploadImage_noSecurity', 
		           type : 'POST',
		           data : formData,
		           dataType:"json",
		           processData : false,
		           async: false,  
		           cache: false,  
		           contentType: false,  
		           success:function(data) {
		           	/* $('img').removeAttr("width");
		           	$('img').removeAttr("height"); */
		            	var imgPath = data.obj;
		           		$('#dwImage').val(imgPath);
		           	<%-- $('img').attr('src','<%=contextPath %>/regionMapController/getImg_noSecurity?path='+imgPath);
		           	showRegionMap(); --%>
		           /* 	setTimeout(function() {
		           		var imgWidth = $('img').width();
		           		$('#mapHeight').val($('img').height());
				        $('#mapWidth').val($('img').width());
		           	},1000); */
		           }
		         });
			}