Я создаю многофайловую загрузку. В процессе проверки, когда я создаю список файлов (перед их отправкой), первый динамически созданный <form>
будет отправлять и работать как ожидалось, но другой динамически созданный <form>
не будет. Это не работает в IE7 + или FireFox...
Также следует отметить, что этот код находится в SharePoint 2007, если есть какие-либо ограничения, о которых можно указать! Спасибо!
Использовать случай
- Пользователь нажимает на просмотр и выбор файла...
- Элемент управления
<input type="file" />
скрыт. - jQuery обертывает
<form>
вокруг<input type="file" />
и добавляет новый<iframe>
, который форма ссылается наtarget
для ответа и отправляет форму. - На стороне сервера я запустил некоторую проверку и отправку имени, размера и опции для удаления.
- В
<iframe>
(ответе) пользователь видит что-то вроде Winter.jpg | 10 KB | (x) удалить - jQuery
clone()
элемент управления<input type="file" class="uploader" />
иappend()
к<div>
в случае, если пользователь хочет загрузить больше. - Примечание: помните, что
clone()
,<form>
и<iframe>
получают уникальные идентификаторы дляid
,name
иtarget
соответственно. Файл.ashx
был протестирован и работает. Я смущен, почему я не могу продолжать создавать новые<form>
s,<input type="file"/>
и<iframe>
и добавлять в список...
HTML
<div id="files">
<div class="field">
<input id="file" type="file" name="file" class="uploader" value="Browse..." />
</div>
</div>
Javascript
К сожалению, код может быть немного неряшливым - пробная версия и ошибка здесь...
<script type="text/javascript">
$('.uploader').live('change', function(){
var $clone = $(this).parent().clone();
var filename = $(this).val().substring($(this).val().lastIndexOf('\\')+1);
//var $form = $('<form id="uploadForm" action="_layouts/GetFileInfo.ashx" method="post" target="fileinfo" enctype="multipart/form-data">');
var $form = $('<form>').attr('id', 'uploadForm').attr('action', '_layouts/GetFileInfo.ashx').attr('method', 'post').attr('target', 'fileinfo').attr('enctype', 'multipart/form-data');
var $result = $('<iframe name="fileinfo' + _uploadId + '" src="upload.html" frameBorder="0" allowtransparency="true" style="width: 250px; height: 25px; border:0;">');
$form[0].id += _uploadId;
$form[0].target += _uploadId;
$clone.find('input')[0].id += _uploadId;
$clone.find('input')[0].name += _uploadId;
//remove button
$('<div class="remove" style="float:right;">').html("x").appendTo($(this).parent());
//append the goodness
$(this).parent().append($result);
$(this).wrap($form);
//let the form render and submit
window.setTimeout(function(){
$('#files form').last().submit();
}, 1000);
$(this).hide();
$clone.find('input').val('');
$(this).parents('#files').append($clone);
_uploadId++;
});
</script>
Я подумал, что вы, ребята, можете спросить, вот здесь выведенный HTML...
Выделенный HTML
<div style="float: left;" class="col" id="files">
<div class="field">
<form id="uploadForm0" action="_layouts/GetFileInfo.ashx" method="post" target="fileinfo0" enctype="multipart/form-data">
<input type="file" value="Browse..." class="uploader" name="file" id="file" style="display: none;">
</form>
<div style="float: right;" class="remove">x</div>
<iframe frameborder="0" style="width: 250px; height: 25px; border: 0pt none;" allowtransparency="true" src="upload.html" name="fileinfo0"></iframe>
</div>
<div class="field">
<form id="uploadForm1" action="_layouts/GetFileInfo.ashx" method="post" target="fileinfo1" enctype="multipart/form-data">
<input type="file" value="Browse..." class="uploader" name="file0" id="file0" style="display: none;">
</form>
<div style="float: right;" class="remove">x</div>
<iframe frameborder="0" style="width: 250px; height: 25px; border: 0pt none;" allowtransparency="true" src="upload.html" name="fileinfo1"></iframe>
</div>
<div class="field">
<input type="file" value="Browse..." class="uploader" name="file01" id="file01">
</div>
</div>