在ASP.NET中的照片上傳

我有一個圖像框和一個帶有保存按鈕的照片上傳控件。我需要將圖像上載到圖像框中。在ASP.NET中的照片上傳

當我點擊上傳按鈕時，它應該在圖像框中顯示圖像。

當我點擊保存按鈕時，上傳圖像的路徑應保存在數據庫中。

我的問題是照片上傳，但只有我第二次點擊上傳按鈕後。

P.S.我使用客戶端功能上傳照片。

以下是我的代碼。

客戶端功能與保存按鈕，圖像盒上傳照片

function ajaxPhotoUpload() { 

     var FileFolder = $('#hdnPhotoFolder').val(); 
     var fileToUpload = getNameFromPath($('#uplPhoto').val()); 

     var filename = fileToUpload.substr(0, (fileToUpload.lastIndexOf('.'))); 
     alert(filename); 
     if (checkFileExtension(fileToUpload)) { 

      var flag = true; 
      var counter = $('#hdnCountPhotos').val(); 

      if (filename != "" && filename != null && FileFolder != "0") { 
       //Check duplicate file entry 
       for (var i = 1; i <= counter; i++) { 
        var hdnPhotoId = "#hdnPhotoId_" + i; 

        if ($(hdnPhotoId).length > 0) { 
         var mFileName = "#Image1_" + i; 

         if ($(mFileName).html() == filename) { 
          flag = false; 
          break; 
         } 

        } 
       } 
       if (flag == true) { 
        $("#loading").ajaxStart(function() { 
         $(this).show(); 
        }).ajaxComplete(function() { 
         $(this).hide(); 
         return false; 
        }); 


        $.ajaxFileUpload({ 
         url: 'FileUpload.ashx?id=' + FileFolder + '&Mainfolder=Photos' + '&parentfolder=Student', 
         secureuri: false, 
         fileElementId: 'uplPhoto', 
         dataType: 'json', 
         success: function (data, status) { 

          if (typeof (data.error) != 'undefined') { 
           if (data.error != '') { 
            alert(data.error); 
           } else { 

            $('#hdnFullPhotoPath').val(data.upfile); 
            $('#uplPhoto').val(""); 
            $('#<%= lblPhotoName.ClientID%>').text('Photo uploaded successfully') 
           } 
          } 


         }, 
         error: function (data, status, e) { 
          alert(e); 
         } 
        }); 
       } 

       else { 
        alert('The photo ' + filename + ' already exists'); 
        return false; 
       } 
      } 
     } 
     else { 
      alert('You can upload only jpg,jpeg,pdf,doc,docx,txt,zip,rar extensions files.'); 
     } 
     return false; 

    }

圖片上傳控制

<table> 
     <tr> 
      <td> 
    <asp:Image ID="Image1" runat="server" Height="100px" Width="100px" ClientIDMode="Static" /> 
       <asp:FileUpload ID="uplPhoto" runat="server" ClientIDMode="Static"/> 
       <asp:Label ID="lblPhotoName" runat="server" Text="" ForeColor ="Green" ClientIDMode="Static"></asp:Label> 
<asp:Button id="btnSave" runat="server" Text="Upload Photograph" onClick="btnSave_Click" OnClientClick="return ajaxPhotoUpload();"/> 
      </td> 
       </tr> 
      </table>

SAVE按鈕單擊事件在服務器端（到在圖像框中顯示上傳的圖像）

Protected Sub btnSave_Click(sender As Object, e As EventArgs) 
    Image1.ImageUrl = hdnFullPhotoPath.Value 

End Sub

來源

2013-09-25 MusicLovingIndianGirl

你面臨什麼問題？對不起，我不明白:( – Karthik

@Karthik，我的問題是照片上傳，但只有當我第二次點擊上傳按鈕（** btnSave **）。 – MusicLovingIndianGirl

您是否正在使用更新面板頁？ –

所有，感謝您的時間和幫助！代字號（〜）符號是問題 - 文件路徑無法識別。所以我修改了我的代碼以將其替換爲空白空間。

var orgpath = data.upfile; 
var photopath = orgpath.replace('~/', ''); 
$('#<%= ImgFacultyPhoto.ClientID%>').attr('src', photopath);

來源

2013-09-26 12:49:30 MusicLovingIndianGirl

我建議你通過JS刪除客戶端AJAX上傳並堅持上傳的標準方式。你也許可以在沒有過多的JavaScript的情況下實現相同的效果。

如果文件類型過濾是一個問題，你可以查看這個帖子瞭解更多詳情。

Getting extension of the file in FileUpload Control

在你必須做出一個回傳，所以如果你從JS上傳或不同之處在於第二種方法在服務器端是不太複雜的它其實並不重要無論哪種方式。

添加更新面板將使這更加用戶友好，你應該全部完成。

來源

2013-09-25 13:15:48

<head runat="server"> 
<title>Index</title> 
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script> 
<script src="../../Scripts/ajaxupload.js" type="text/javascript"></script> 
</head> 

<body> 

<div> 
    <input type="button" id="uploadFile" value="Upload File" />(jpg|jpeg|png|gif) 
    <div id="uploadStatus" style="color: Red"> 
    </div> 
</div> 
<script type="text/javascript" language="javascript"> 

     new AjaxUpload('#uploadFile', { 
      action: 'Handler1.ashx', 
      name: 'upload', 
      onComplete: function (file, response) { 

       if (response == '0') { 
        $('#uploadStatus').html("File can not be upload."); 
       } 
       else { 
        $('#img').attr("src", "response.path"); 
       } 

      }, 
      onSubmit: function (file, ext) { 
       if (!(ext && /^(jpg|jpeg|png|gif)$/i.test(ext))) { 
        $('#uploadStatus').html("Invalid File Format.."); 
        return false; 
       } 

       $('#uploadStatus').html("Uploading..."); 
      } 

     }); 

</script>

然後創建一個處理程序在服務器上

public class Handler1 : IHttpHandler 
{ 

    public void ProcessRequest(HttpContext context) 
    { 
     string a = "1"; 

     if (context.Request.Files != null && context.Request.Files.Count > 0) 
     { 
      if (context.Request.Files[0].ContentLength > 1000) 
      { 
       a = "0"; 
      } 
     } 
     else 
     { 
      a = "0"; 
     } 

     context.Response.Write(a); 

     context.Response.End(); 

    } 

    public bool IsReusable 
    { 
     get 
     { 
      return false; 
     } 
    } 
}

上傳圖像

來源

2013-09-25 13:24:45

在ASP.NET中的照片上傳

回答

相關問題