2013-09-12 3 views
9

Я использую функцию загрузки на моем веб-сайте asp. Поэтому я использую тип ввода файлов. Но этот элемент управления добавляет кнопку загрузки кнопки по умолчанию и текстовое поле, где путь отображается после выбора файла в Internet Explorer. Я не хочу показывать кнопку просмотра и т. Д. Так что я сделал это, добавив кнопку «Прикрепить файл», и я написал скрипт «triggerFileUpload», где я нажимаю на элемент управления загрузкой. Итак, теперь, когда я нажимаю кнопку «Прикрепить файл», открывается окно с файлами и вы можете выбрать файл для загрузки. Но когда я нажимаю кнопку отправки, управление загрузкой файла сбрасывается, и файл не загружается. Ошибка в том, что при нажатии кнопки отправки управление файлом становится нулевым. Это происходит только в Internet Explorer. Поэтому, пожалуйста, помогите мне решить эту проблему. Ниже приведен код, который может показать проблему, с которой я столкнулся в IE. Проблема возникает, если я также использую asp: FileUpload. (мой план состоит в том, чтобы скрыть управление файлами и показать пользователю только кнопку прикрепленного файла).Загрузка файла сбрасывается при нажатии кнопки отправки

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script type="text/javascript"> 
     function triggerFileUpload() { 
      document.getElementById("FileUploaddd2").click(); 
     } 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
    <input id="Button2" type="button" onclick="triggerFileUpload()" value="Attach a File" /> 
    <input type="file" id="FileUploaddd2" runat="Server" /> 
    <br /> 
    <asp:Button ID="btnSubmit" runat="server" BorderColor="Black" 
          BorderStyle="Solid" BorderWidth="1px" 
          Text="Submit" /> 
    </div> 
    </form> 
</body> 
</html> 

Скачать образец кода here

UPDATE

Чтобы воспроизвести ошибку я обращенную

1) запустить проект я дал в ссылке

скачать 2) Тест в Internet Explorer - любая версия

3) Нажмите на присоедините кнопку файл (не на Разглядеть, она предназначена, чтобы сделать видимыми ложные, здесь приведены только для примера цели)

4) просматривать файлы в окнах, появляющихся и нажмите кнопку OK

5) теперь нажмите кнопку «Сохранить».

При нажатии кнопки сохранения функция btnsave_Click должна запускаться, но она не запускается. Если я снова нажимаю кнопку сохранения, btnsave_Click запускается. Но на этот раз элемент управления загрузкой не будет иметь выбранный файл. Вы можете увидеть его в текстовое поле, предоставленное также контролем просмотра (только для показа этого я сделал управление просмотром видимым)

Итак, теперь вопрос, почему btnsave_Click не запускается в первый раз?

+0

Ваш код работает, и это публикация файла. В btnSubmit проверяет файл. – afzalulh

+0

@afzalulh В IE его не работает для меня. У вас нажата кнопка с файлом и загруженный файл или с помощью опции просмотра? –

+0

Похоже, вы столкнулись с этой проблемой: [localizing .IE проблема] (http://stackoverflow.com/q/4489120/690329) – afzalulh

ответ

6

Проблема в том, что IE не позволит вам отправить файл через javascript, пользователь должен щелкнуть ввод файла. Это известная проблема, описанная здесь:

When an file-input is opened via a scripted, forced click() event, IE won't let you submit the form. If you click the file-input via your own mouse (what we don't want), IE will let you submit the form.Open file input dialog and upload onchange possible in IE?

, а также здесь: File Upload Using Javascript returns 'Access Denied' Error With Stylized to a button

Таким образом, вы должны обмануть пользователя, сделать файл-вход прозрачным и поместите кнопку под файл -input. Когда пользователь нажмет вашу кнопку, они вместо этого нажимают на ввод файла.

С CSS (вероятно, вам нужно будет настроить его) разметка должна выглядеть следующим образом:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1" runat="server"> 
    <style type="text/css"> 
     .fileContainer { 
      overflow: hidden; 
      position: relative; 
     } 

     #FileUploaddd2 { 
      position: relative; 
      text-align: right; 
      -moz-opacity: 0; 
      filter: alpha(opacity: 0); 
      opacity: 0; 
      z-index: 2; 
      left: -130px; 
     } 

     #Button2 { 
      position: absolute; 
      top: 0px; 
      left: 0px; 
      z-index: 1; 
     } 
    </style> 
    <title></title> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <div> 
      <label class="fileContainer"> 
       <input id="Button2" type="button" value="Attach a File" /> 
       <input type="file" id="FileUploaddd2" runat="Server" /> 
      </label> 
      <br /> 
      <br /> 
      <asp:Button ID="btnSubmit" runat="server" BorderColor="Black" 
       BorderStyle="Solid" BorderWidth="1px" 
       Text="Submit" /> 
     </div> 
    </form> 
</body> 
</html> 

И в код вы можете поймать представленный файл

Protected Sub btnSubmit_Click(sender As Object, e As EventArgs) Handles btnSubmit.Click 
    Dim file As System.Web.HttpPostedFile = FileUploaddd2.PostedFile 
    If Not file Is Nothing Then 
     'Save file? 
    End If 
End Sub 

EDIT : Если вы хотите показать имя файла на этикетке, вы можете сделать следующее:

В событии изменения входного файла вызовите функцию jsfunction :

<input type="file" id="FileUploaddd2" runat="Server" onchange="setlabelvalue();" /> 

Добавить ярлык для отображения файла:

<asp:Label ID="lblFileName" runat ="server" Text=""></asp:Label> 

Добавить setlabelvalue() JS функции:

function setlabelvalue() { 
      var filename = document.getElementById("FileUploaddd2").value; 
      var lastIndex = filename.lastIndexOf("\\"); 

      if (lastIndex >= 0) { 
       filename = filename.substring(lastIndex + 1); 
      } 
      document.getElementById('<%=lblFileName.ClientID%>').innerHTML = filename; 
     } 
+0

Он отлично работает. Но при прикреплении файла я могу получить ярлык рядом с кнопкой, так как «filename прикреплен», что является недостатком свойства контроля загрузки файлов. Это будет полезно, если я смогу для этого –

+1

Я добавил код в ответ. – afzalulh

+0

Эй, он печатает путь к выбранному файлу. Также он неправильный. В chrome он печатает «C: \ fakepath» и за ним следует имя файла выбранного файла. Что такое «C: \ fakepath», который добавляется к любому выбранному файлу? Как его можно исправить? Я хочу только имя файла (в IE6 отображается полный путь к файлу, в mozilla он печатает только имя файла, но в chrome он включает в себя fakepath с именем) –

1

Уверена, что щелчок работает? Потому что я думаю, что вы неправильно пишете код java-скрипта.

Вы должны получить ClientID о загрузке файла в Java Script

так:

document.getElementById('<%= FileUploaddd2.ClientID %>').click(); 

После вашего обновления, я был в состоянии запустить успешно код ...

Я думаю, вам нужно добавить эту строку после блока catch try внутри блока if на вашем серверном коде ...

Try 
     sb.AppendFormat(" Uploading file: {0}", FileUpload1.FileName) 
     'saving the file 
     FileUpload1.SaveAs("c:\SaveDirectory\" + FileUpload1.FileName) 
     'Showing the file information 
     sb.AppendFormat("<br/> Save As: {0}", FileUpload1.PostedFile.FileName) 
     sb.AppendFormat("<br/> File type: {0}", FileUpload1.PostedFile.ContentType) 
     sb.AppendFormat("<br/> File length: {0}", FileUpload1.PostedFile.ContentLength) 
     sb.AppendFormat("<br/> File name: {0}", FileUpload1.PostedFile.FileName) 
    Catch ex As Exception 
     sb.Append("<br/> Error <br/>") 
     sb.AppendFormat("Unable to save file <br/> {0}", ex.Message) 
    End Try 
    lblmessage.Text = sb.ToString() 

ПОСЛЕ ОБНОВЛЕНИЯ

После просмотра обновления об Internet Explorer.Я думаю, ваша проблема заключается в следующем:

Simulating the click on input type="file" using javascript

Это также может помочь: Browser check before executing an event

Вы также можете использовать AjaxFileUpload Ajax Control Toolkit для лучшего отображения и функции, такие как перетаскивание уже реализованы в том, что: Have a look , Таким образом вам не придется имитировать щелчок на кнопке.

+0

Это не работает для меня. Проблема все еще сохраняется, как и раньше. Что такое идентификатор клиента? –

+0

Что именно вы имеете в виду при сбросе? Как кнопка сбрасывается? Не позволяет ли элемент управления FileUpload возвращать значение в поле «Отправка»? –

+0

Элемент управления загрузкой сбрасывается. Выбранный файл будет пустым. Если вы запустите код, указанный мной, вы получите именно то, что я имею в виду. –

1

загрузки файла в asp.net довольно прямо вперед, но требует некоторых твики. Вот пример:

<form id="Form1" method="post" runat="server" enctype="multipart/form-data"> 
<input id="filMyFile" type="file" runat="server"><br/> 
<asp:Button ID="btnSubmit" runat="server" BorderColor="Black" 
          BorderStyle="Solid" BorderWidth="1px" 
          Text="Submit" /> 
</form>

Попробуйте это, и он должен работать.

После того, как вы загрузили файл, у вас есть filMyFile.Visible=false; и добавьте ярлык, чтобы показать загруженный файл и ссылку, чтобы удалить его.

Я надеюсь, что это имеет смысл сейчас.

Вот действительно прямой ссылки: http://www.codeproject.com/Articles/1757/File-Upload-with-ASP-NET

+0

Эй, что вы упомянули, это простая функция загрузки. Но я хочу, чтобы управление загрузкой не было видимым для пользователя. Он увидит только кнопку файла attch. На экране появится окно просмотра. –

+0

Хорошо, вы можете использовать свой код, как есть, с двумя изменениями. '1' - добавить атрибут enctype в тег формы. '2'- Добавить ClientIDMode =" Static "в директиве страницы. –

+0

Я попробовал его. Как и раньше. Ошибка все еще существует в IE –

1

я не знаю, если я неправильно понял вопрос, но почему бы вам не сделать:

triggerFileUpload() { 
     document.forms[0].submit(); 
} 
+0

IE <9 не позволяет JS автоматически отправлять форму, если существует загрузка файла – Raptor

Смежные вопросы