处理html5 formupload (文件)
我有3个问题(!)使用“非常简单”的文件上传表单。我将尝试简短地解释:-)：
1.)将文件发送到action="“中给出的服务器脚本位置时，我不想打开新窗口！但实际上，当我提交一个空白的窗口时。所以现在，我用target="_blank“打开它。有没有办法说“只需执行操作，将数据发送到sript，但不打开任何窗口或内容？”或“打开后立即关闭空白窗口:-)？”
2.)您知道像ajax一样在表单中发送http-header字段的方法吗？我需要发送一份认证
3.)哪个事件(html5新事件？)您是否建议在成功发送数据后使用执行(在ajax中，我总是使用"complete或success events，是否有类似于表单的东西？“)
迷惑:谢谢你的建议
<form id="uploaddata" enctype="multipart/form-data" method="post" action="/cgi-bin/send/?auth='+sessionStorage.logindata+'" target="_blank">
<input type="hidden" name="folder" value="'+PATH+'" />
<input id="file" type="file" class="choosefile" max="999" min="1" name="attach" filename="" accept="">
<input type="button" id="formupload" class="submitupload" value="Upload">
<input type="submit" class="submitupload button" value="Upload">
</form>回答 1
Stack Overflow用户
发布于 2011-10-17 19:59:46
如果不使用AJAX，您将失去很多使用此表单的必备组件。
通过使用AJAX，你可以: 1.防止弹出窗口2.添加额外的头文件3.有一个事件
如果没有AJAX，表单的提交操作必须转到某个地方，无论是弹出窗口还是同一窗口。您对帖子的响应将决定浏览器中显示的内容。
因此，您可以通过发送回另一个包含所需操作的网页来处理服务器端的问题1和3。
问题2你可以使用GET方法而不是post方法作为查询字符串发送，虽然它们不是标题，但你可以使用隐藏的表单字段，但在大多数情况下这是不可取的。此外，使用post将表单中的所有内容与数据包一起发送到服务器，并且可以读取，但同样不能在报头中读取。
我建议只使用AJAX来解决您的问题，由于其异步和可定制的特性，它似乎非常适合您的问题。
编辑:正如您所询问的iframe功能，下面是表单信息：
<form id="fileAPITesting" action="startStopResume.aspx" method="POST" target="upload_target" enctype="multipart/form-data" encoding="multipart/form-data">
<input type="file" id="fileInput" name="fileInput" />
<button id="submit" type="submit" >Submit</button>
</form>
<iframe id="upload_target" name="upload_target" src="#" style="display:none;"></iframe>这会自动将post函数重定向到iframe。然后你可以添加一些代码(这里我使用jQuery来简化)来防止这种情况，并使用你的AJAX：
<script type="text/javascript">
$('#fileAPITesting').bind('submit', function(e){
e.preventDefault();
fileProcessing(document.getElementById('fileInput'));
});
setStatusArea();
</script>在这里，jQuery表单插件变得非常方便。同样值得注意的是，如果您链接到jQuery的谷歌代码库，很可能不会增加页面开销，因为许多其他页面都使用jQuery，而且它会在用户的缓存中。以下是指向该页面链接：
http://plugins.jquery.com/project/form
我的表单还有许多其他要求，但这是我的后端页面的一个示例：
function fileProcessing(fileToProcess){
// grab file information only allows 1 file at a time
// In IE have to grab differently
if(window.File){
file = fileToProcess.files[0];
clearForm(false);
if (file){
fileLength = file.size;
fileName = file.name;
totalBLObs = Math.ceil((fileLength / BYTES_PER_CHUNK));
initialInformation();
$('#stop').toggle();
hideButtons();
$('#pause').toggle();
fileSending();
}else{
statusField('No file selected');
}
}else{
// without a the file API we have to submit the entire form to an iframe
file = fileToProcess;
clearForm(false);
fileAPI = false;
time = new Date();
if(file.value){
// IE cannot get a proper handle on the information
hideButtons();
fileName = file.value;
fileName = fileName.substr(fileName.lastIndexOf('\\') + 1);
statusField('<br />The File API is not implemented.' +
'<br />Attempting alternate method with only start & stop status' +
'<br />Started at: ' + time.toLocaleTimeString());
$('#fileAPITesting').ajaxSubmit({
beforeSubmit: function(a,f,o) {
o.dataType = 'string';
try{
$('#uploadOutput').html('<img src="images/loaderb64.gif"' +
'alt="loading" /><br />Submitting...');
$('#uploadOutput').show();
}catch(e){
statusField('<br />Submitting...');
}
},
success: function(data) {
if (typeof data == 'object' && data.nodeType)
data = elementToString(data.documentElement, true);
else if (typeof data == 'object')
data = objToString(data);
time = new Date();
statusField('<br />'+ data + ' at ' + time.toLocaleTimeString());
try{
$('#progress').hide();
$('#progress').html('');
}catch(e){
// #progress doesn't exist
}
}
});
}else{
statusField('No file selected');
}
}
};希望这能让你走上正确的道路。
https://stackoverflow.com/questions/7793320
复制相似问题
腾讯云开发者
