$ ("# tabs"). Tabs() breaks file upload

У меня есть простая загрузка файла, которую я хочу включить на вкладке jquery с помощью href. К сожалению, он разбивается на вкладке.

Код приведен ниже. Если я закомментирую $ ("# tabs"). Tabs(); в содержащем коде он работает; если нет, загрузка файла не происходит.

Код загрузки файла, содержащиеся в файле, upload.html, заключается в следующем:

<html> 
<body> 
    <form name="registration" action="../php/recordInteraction.php" method="post" 
     accept-charset="utf-8" target="_self" enctype="multipart/form-data" > 
    <div> 
    <input type="file" name="fileToUpload" id="fileToUpload" > 
    <p><label for="submit"> Hi</label> 
     <input type="submit" name="submit" id="submit" value="Upload" > 
    </p> 
    </div> 
</form> 
</body> </html>

Содержащий код JQuery, small.html, является:

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
    <script> 
    $(function() { 
    $("#tabs").tabs(); 
    }); 
    </script> 
</head> 
<body> 

<div id="tabs" > 
    <ul> 
    <li><a id="upload" href="upload.html">Upload</a></li> 
    </ul> 
</div> 

</body> 
</html>

источник

2014-12-10 LenB

Вот простое решение jQuery. Когда клика нажата, jQuery нажимает кнопку загрузки файла.

Прокомментирован jQuery.

$('#uploadButton').click(function() { // when the tab is clicked 
 

 
    $('#fileToUpload').click(); // pretend the file input was clicked 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<html> 
 

 
<body> 
 

 
    <a href="#" id="uploadButton">Browse for files</a> 
 
    <br/><br/> 
 

 
    <form name="registration" action="../php/recordInteraction.php" method="post" accept-charset="utf-8" target="_self" enctype="multipart/form-data"> 
 
    <div> 
 
     <input type="file" name="fileToUpload" id="fileToUpload"> 
 
     <p> 
 
     <label for="submit">Hi</label> 
 
     <input type="submit" name="submit" id="submit" value="Upload"> 
 
     </p> 
 
    </div> 
 
    </form> 
 
</body> 
 

 
</html>

источник

2014-12-10 04:29:20

Я не объяснил проблему правильно. Я опубликовал новый код, иллюстрирующий проблему. – LenB

@LenB, этот код будет работать и для вашей вкладки. Просто измените '$ ('# uploadButton')' на '$ ('# upload')'. –

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

, что @God хорошо написал правильно. вы также можете сделать это, напрямую отправив форму.

<html> 
<body> 
    <a href="#" id="uploadButton">Browse for files</a> 
    <br/><br/> 
    <form name="registration" action="../php/recordInteraction.php" method="post" 
    accept-charset="utf-8" target="_self" enctype="multipart/form-data" **id="fileSubmitForm"**> 
    <div> 
    <input type="file" name="fileToUpload" id="fileToUpload" > 
    <p><label for="submit"> Hi</label> 
     <input type="submit" name="submit" id="submit" value="Upload" > 
    </p> 
    </div> 
</form> 
</body> </html> 

$('#uploadButton').click(function() { // when the tab is clicked 

    $('#fileSubmitForm').submit(); // pretend the file input was clicked 

});

источник

2014-12-10 05:49:33

Я не объяснил проблему правильно. Я опубликовал новый код, иллюстрирующий проблему. – LenB

$ ("# tabs"). Tabs() breaks file upload

ответ

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