Загрузка фотографий в ASP.NET

Question

У меня есть окно с изображением и элемент управления фото-загрузкой с помощью кнопки «Сохранить». Мне нужно загрузить изображение в окно изображения.

Когда я нажимаю кнопку «Загрузить», она должна показывать изображение в окне изображения.

Когда я нажимаю кнопку «Сохранить», путь к загруженному изображению должен сохраняться в базе данных.

Моя проблема заключается в том, что фото загружается, но только после того, как я нажму кнопку «Загрузить» во второй раз.

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; 

    } 

ФОТО ЗАГРУЗИТЬ УПРАВЛЕНИЯ С SAVE кнопку и IMAGE BOX

<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> 

СОХРАНИТЬ КНОПКА НАЖМИТЕ СОБЫТИЕ В стороне сервера (к показать загруженное изображение в окне изображения)

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

End Sub 

Answer 1

Все, спасибо за ваше время и помощь.! Проблема с тильдой (~) - путь файла не был распознан. Поэтому я изменил свой код, чтобы заменить его пустым пространством.

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

Answer 2

Я бы рекомендовал вам отказаться от загрузки AJAX на стороне клиента через JS и придерживаться стандартного способа загрузки. Вероятно, вы можете достичь таких же эффектов без чрезмерного javascript.

Если фильтрация типа файла является проблемой, вы можете проверить это сообщение для получения более подробной информации.

Getting extension of the file in FileUpload Control

В любом случае вы должны сделать постбэк так что это на самом деле не имеет значения, если вы загружаете из JS или на стороне сервера за исключением того, что второй метод является менее сложным.

Добавление панели обновления сделает ее более удобной для пользователя, и все должно быть сделано.

Answer 3

<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; 
     } 
    } 
}