找了N多的辦法,總算是解決了這個問題:
首先添加兩個js庫 可以自己去網上下載
<script type="text/javascript" src="/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="/js/jquery.form.js"></script>
然後就是前臺代碼部分 這裏把fileupload控件隱藏,
<form id="fileform" method="post">
<img id="u_img" runat="server" src="/images/t2.jpg" />
<input type="button" class="checkimg" value="修改頭像"/>
<input id="FileUpload1" name="FileUpload1" type="file" style="display:none" />
</form>
然後通過普通按鈕的點擊事件來觸發fileupload的點擊事件,再通過fileupload的change事件觸發ajax到後臺上傳
jQuery(document).ready(function () {
jQuery(".checkimg").click(function () {
jQuery('#FileUpload1').click();
});
jQuery("#FileUpload1").change(function () {
jQuery("#fileform").ajaxSubmit({
url: "/ucenter/fileuploud.aspx?action=topimg&FileName=FileUpload1",
dataType: 'text', //數據格式爲json
beforeSend: function () { //開始上傳
},
success: function (data) { //成功
jQuery("#u_img").attr("src", data);
},
error: function (xhr) { //上傳失敗
//alert("上傳失敗");
}
/// <summary>
/// 修改照片
/// </summary>
/// <param name="FileName">上傳控件名name</param>
private void checkimg(string FileName)
{
if (Request.Files[FileName].ContentLength > 0)
{
HttpPostedFile f = Request.Files[FileName];//獲取控件元素
string filename = f.FileName;//獲取文件名
string path = "/UploadFiles/" + imgname(filename);//上傳地址+文件名,imgname是我自己寫的文件重新命名的方法
f.SaveAs(Server.MapPath(path));//上傳文件到服務器
try
{
Response.Write(path);
}
catch (Exception ex) { Response.Write(ex); }
}
else
{
Response.Write("error");
}
}