asp.net單步無刷新上傳並回顯圖片

找了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");
            }
        }



發佈了42 篇原創文章 · 獲贊 4 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章