模拟app端上传图片

【模拟app端上传图片】我自横刀向天笑，去留肝胆两昆仑。这篇文章主要讲述模拟app端上传图片相关的知识，希望能为你提供帮助。
使用插件模块管理模式：
jsp页面：

< sys:fileUpload fieldName="picList" contentId="true" valueList="${picturesList}"> < /sys:fileUpload> < form:hidden id="nameImage" path="prePhoto" htmlEscape="false" maxlength="255" class="input-large"/>

引入< sys:fileUpload> < /sys:fileUpload> 标签

< %@ taglib prefix="sys" tagdir="/WEB-INF/tags/sys" %>

fileUpload文件内容：

< %@ tag language="java" pageEncoding="UTF-8"%> < %@ include file="/WEB-INF/views/include/taglib.jsp"%> < %@ attribute name="tag" type="java.lang.String" required="false" description="每个列表的标识，如需求分隔不同的列表页，应传入"%> < %@ attribute name="fieldName" type="java.lang.String" required="true" description="图片对应的字段名称"%> < %@ attribute name="valueList" type="java.util.List" required="true" description="图片背景实体"%> < %@ attribute name="contentId" type="java.lang.Boolean" required="true" description="是否包含id"%> < c:if test="${empty isLoaded}"> < c:set var="isLoaded" value="https://www.songbingjia.com/android/1" scope="request" /> < link href="https://www.songbingjia.com/android/${ctxStatic}/fileupload/fileUpload.css" rel="stylesheet" /> < script type="text/javascript" src="https://www.songbingjia.com/android/${ctxStatic }/fileupload/fileUpload.js"> < /script> < /c:if> < script type="text/javascript"> $(function(){< c:forEach var="picture" varStatus="status" items="${picturesList}"> if(\'${picture.userPhotos}\'!=\'\'){ var a = document.getElementById(\'${fieldName}[${status.index}]\'); onloadChange(a,\'${picture.userPhotos}\'); } < /c:forEach> }); < /script> < div class="section"> < div class="article"> < c:forEach items="${valueList}" var="picture" varStatus="status"> < div class="item"> < img class="addImg" onclick="clickImg(this); " src="https://www.songbingjia.com/android/${picture.urlPath }"> < c:if test="${contentId}"> < input type="hidden" class="itemId" value="https://www.songbingjia.com/android/${picture.id}" name="${fieldName}[${status.index}].id"/> < input width="200px; " class="userPhotos" id="userPhotos" type="hidden" value="https://www.songbingjia.com/android/${picture.userPhotos}" name="${fieldName}[${status.index}].userPhotos"/> < /c:if> < input name="${fieldName}[${status.index}].files" id="${fieldName}[${status.index}]"class="upload_input" onchange="change(this)" type="file" accept="image/*"> < div class="preBlock"> < img class="preview" id="preview" name="pic" width="190" height="190"> < /div> < img class="delete" onclick="deleteImg(this)" src="https://www.songbingjia.com/android/${ctxStatic }/images/delete.png"> < /div> < /c:forEach> < div style="clear: left; "> < /div> < /div> < /div>

fileUpload.js文件内容

//点击 var clickImg = function(obj){ $(obj).parent().find(\'.upload_input\').click(); } //删除 var deleteImg = function(obj){ $(obj).parent().find(".userPhotos").val(\'\'); $(obj).parent().find(\'img.preview\').attr("src",""); //IE9以下 $(obj).parent().find(\'img.preview\').css("filter",""); $(obj).hide(); $(obj).parent().find(\'.addImg\').show(); } //选择图片 function change(file) {//预览 var pic = $(file).parent().find(".preview"); $(file).parent().find(".userPhotos").val(file.value); //添加按钮 var addImg = $(file).parent().find(".addImg"); //删除按钮 var deleteImg = $(file).parent().find(".delete"); var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase(); // gif在IE浏览器暂时无法显示 if(ext!=\'png\'& & ext!=\'jpg\'& & ext!=\'jpeg\'){ if (ext != \'\') { alert("图片的格式必须为png或者jpg或者jpeg格式！"); } return; } //判断IE版本 var isIE = navigator.userAgent.match(/MSIE/)!= null, isIE6 = navigator.userAgent.match(/MSIE 6.0/)!= null; isIE10 = navigator.userAgent.match(/MSIE 10.0/)!= null; if(isIE & & !isIE10) { file.select(); var reallocalpath = document.selection.createRange().text; // IE6浏览器设置img的src为本地路径可以直接显示图片 if (isIE6) { pic.attr("src",reallocalpath); userPhotos.value = https://www.songbingjia.com/android/reallocalpath; }else{ // 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现 pic.css("filter","progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=\'scale\',src=https://www.songbingjia.com//"" + reallocalpath + "\\")"); // 设置img的src为base64编码的透明图片取消显示浏览器默认图片 pic.attr(\'src\',\'data:image/gif; base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\'); } addImg.hide(); deleteImg.show(); }else { html5Reader(file,pic,addImg,deleteImg,userPhotos); } }//onload展示图片 function onloadChange(file,src) {//预览 var pic = $(file).parent().find(".preview"); //添加按钮 var addImg = $(file).parent().find(".addImg"); //删除按钮 var deleteImg = $(file).parent().find(".delete"); pic.attr("src",src); addImg.hide(); deleteImg.show(); } //H5渲染 function html5Reader(file,pic,addImg,deleteImg){ debugger; var file = file.files[0]; var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e){pic.attr("src",this.result); } addImg.hide(); deleteImg.show(); }

预览：
这个控件是根据后台配置了几张背景图，就只能上传几张图片，根据需求不同应稍加修改：