C#使用ajaxForm进行上传图片
<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上传图片可以直接上传到接口上没有必要用自己后台做为中转