前台 图片上传 上传预览 调用上传服务(多张图片展示)

function openBrowse(){
var ie=navigator.appName=="Microsoft Internet Explorer" ? true : false;
if(ie){
document.getElementById("file").click();
document.getElementById("filename").value=document.getElementById("file").value;
}else{
var a=document.createEvent("MouseEvents");
a.initEvent("click", true, true);
document.getElementById("file").dispatchEvent(a);
}
}

function setImagePreview() {
if($('div[id="localImag"]').length>5){
alert("最多只能上传5张图片!");
return;
}
var uploadSrc = "";
$.ajaxFileUpload({
async : false,
url : "${ctx}/xxxx/xxx/xxx",
secureuri : false,
fileElementId :['file'],
dataType : 'text',
success : function(data) {
uploadSrc = $(data).text();
if(uploadSrc == '' || uploadSrc.indexOf("错误") > -1){
$('#pic').show();
$('#nameImage').val('');
$('#preview').attr('src',uploadSrc);
$("#preview").css('display','none');
$("#localImag").css('display','none');

$('#cancelButton').hide();
return true;
}else{
$('#pic').hide();
$("#preview").css('display','block');
$("#localImag").css('display','block');
$('#cancelButton').show();
}

var docObj = document.getElementById("file");
var imgObjPreview = document.getElementById("preview");
if (docObj.files && docObj.files[0]) {
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '200px';
imgObjPreview.style.height = '150px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);

} else {

//IE下，使用滤镜
docObj.select();
var imgSrc = uploadSrc;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "200px";
localImagId.style.height = "150px";

//图片异常的捕捉，防止用户修改后缀来伪造图片
try {

$(localImagId).find('#preview').attr('src',imgSrc);
$('p[name="notShow"]').hide();
$('p').append(localImagId);
$(localImagId).append('<input type="hidden" name="picUrl" id="picUrl"/>');
$(localImagId).find('#picUrl').attr('value',imgSrc);
$('input[id="nameImage"]').attr('value','');
$("#preview").css('display','block');
} catch (e) {
alert("您上传的图片格式不正确，请重新选择!");
return false;
}
}

$("#nameImage").val(uploadSrc);
$('#nameImage').attr("readonly","readonly")//将input元素设置为readonly
},
error : function(data) {
alert(data);
}
});
return true;
}

 

//点黑色的x 关掉当前的图片

function checkClose(element){
        var parentElement =element.parentNode;
            if(parentElement){
                  parentElement.remove(element);
             }
        }

================================================

<input type=file name="fileUpload" id="file" οnchange="javascript:setImagePreview(this);" style="display:none">

<li><label>奖&nbsp;品&nbsp;&nbsp;图:</label>
<form:input id="nameImage" name="nameImage" path="picUrl" htmlEscape="false" maxlength="500" readonly="true" class="required" />
<label id="pic" for="pic" class="error" style="diplay:none">图片类型必须是.gif,jpeg,jpg,bmp中的一种</label>
<input type="button" name="button" style="margin-bottom: 0px;" οnclick="javascript:openBrowse(this);" value="上传图片"/>
<!-- <input type="button" id="cancelButton" name="button" style="margin-bottom: 0px;diplay:none" οnclick="javascript:cancelBrowse();" value="取消上传"/> -->
<span class="help-inline"><font color="red">*</font> </span>
<p style="diplay:none" name="notShow"><div id="localImag" class="localImags"><div class='clo' onClick='javascript:checkClose(this);'></div><img id="preview" style="diplay:none" /></div></p></li>