标签：
<div class=‘imgOuter addImgBtn l_canshu‘ id=‘ImagePath1‘ value=‘‘> <img src="../Images/AddI.gif" id="imgg" alt="Alternate Text" /> <form action="@UploadURL" method="post" enctype="multipart/form-data" id="user_head_form11"> <input type="file" class="bbbb" id="qdctvfile11" name="qdctvfile" onchange="eventStart(this);" /> <input type="hidden" id="redirectUrl" name="redirectUrl" value="http://@(System.Configuration.ConfigurationManager.AppSettings["UrlHasPort"])/CommonData/Callback" /> <input type="hidden" id="hidImg1" value="@Model.themePicUrl" /> <input type="hidden" name="type" value="1" /> </form> <dd class="cccc" id="cccc1" style="display: none">上传中.....</dd> </div>
.zImagesUploadBox {
width: 961px;
height: 110px;
padding: 15px 20px 0;
}
.imgOuter {
float: left;
position: relative;
width: 168px;
height: 108px;
border: 1px solid #ccc;
margin-right: 12px;
}
.imgOuter p.btnsBox {
display: none;
position: absolute;
left: -1px;
bottom: 7px;
width: 142px;
height: 26px;
padding: 0 14px;
z-index: 2;
}
.imgOuter p.btnsBox a.deleteBtn {
float: right;
width: 68px;
height: 26px;
background: url("../Images/z_addImagesBtn_02.gif") 0 bottom no-repeat;
}
.imgOuter p.btnsBox a.bigImg {
float: left;
width: 68px;
height: 26px;
background: url("../Images/z_addImagesBtn_02.gif") no-repeat;
}
.imgOuter p.mask {
display: none;
position: absolute;
left: -1px;
top: -1px;
width: 170px;
height: 110px;
background: #000;
opacity: 0.5;
filter: alpha(opacity=50);
z-index: 1;
}
.imgOuter img {
display: block;
}
input {
outline: none;
}
.addImgBtn {
float: left;
width: 160px;
height: 90px;
cursor: pointer;
opacity: 100; background-size: 100% auto;
}
.bbbb{
cursor: pointer;position: absolute;right: 0;top: 0;opacity: 0;filter:alpha(opacity=0);height: 90px;width: 160px;
}
.cccc {
position: absolute;
background: #000;
opacity: 0.5;
width: 160px;
height: 90px;
text-align: center; padding: 40px;
color: #fff;
}
.addImgLayer {
left: 2px;
top: -108px;
width: 175px;
position: relative;
display: none;
}
em {
left: 0px;
top: 5px;
font-style: normal;
position: absolute;
font-size: 14px;
line-height: 26px;
padding: 0 0 0 0;
}
.l_canshu div i{ position:absolute; right:5px; top:3px; width:14px; height:14px; background:url(../Scripts/addResource/img/l_InnercloseImg.png) no-repeat; z-index:999; cursor:pointer;}
function eventStart(obj) {
var fileLength = getFileSize(obj);
if (fileLength < 1.5 * 1024 * 1024) {
$("#user_head_form11").submit();
}
else {
bootbox.alert({
size: ‘small‘,
message: "请上传1.5M以内的图片文件！",
title: "提示",
callback: function () {
}
})
return false;
}
}
function getFileSize(obj) {
var objValue = obj.value;
if (objValue == "") return;
var fileLenth = -1;
try {
//对于IE判断要上传的文件的大小
var fso = new ActiveXObject("Scripting.FileSystemObject");
fileLenth = parseInt(fso.getFile(objValue).size);
} catch (e) {
try {
//对于非IE获得要上传文件的大小
fileLenth = parseInt(obj.files[0].size);
} catch (e) {
fileLenth = -1;
}
}
return fileLenth;
}
$(document).ready(function () {
$("#user_head_form11").ajaxForm({
iframe: true,
beforeSerialize: function () {
var filepath = $("#qdctvfile11").val()
var extStart = filepath.lastIndexOf(".");
var ext = filepath.substring(extStart, filepath.length).toUpperCase();
if (ext != ".PNG" && ext != ".JPG") {
bootbox.alert({
size: ‘small‘,
message: "图片仅支持png,jpg格式",
title: "提示",
callback: function () {
}
})
$("#qdctvfile11").val("");
return false;
}
//$("#cccc1").show();
$("#imgg").attr("src", "../Images/11.png");
$("#hiddenImg").val(1);
},
success: function (data) {
data = JSON.parse(data);
$("#hiddenImg").val("");
$("#cccc1").hide();
if (data.code == "OK") {
$("#ImagePath1").attr("value", "1");
$("#hidImg1").val(data.originalImgUrl);
$("#imgg").attr("src", data.thumpImgUrl);
$("#themePicMd5").val(data.md5Abstract);
}
}
});//end ajaxForm
});
使用ajaxForm上传图片可以直接上传到接口上没有必要用自己后台做为中转
标签：
原文地址：http://www.cnblogs.com/ansheng/p/5482246.html
