Forms 处理html5表单上传（文件）

我有3个问题（！）使用“非常简单”的文件上传表单。我将试着简短地解释：-）：

1.）将文件发送到服务器脚本位置时，如action=”“中所示，我不想打开新窗口！ 但事实上，当我提交一个空白窗口时。现在，我用target=“_blank”打开它。有办法说吗 “只需执行您的操作，将数据发送到SRIPT，但不打开任何窗口或内容？”或“关闭空白窗口”。 你一打开它：-）

2.）您知道如何像使用ajax一样使用表单发送http头字段吗？我需要发送身份验证

3.）成功发送数据后，您建议使用哪个事件（html5新事件？）来执行（我通常使用的是ajax） “完成或成功的活动，是否有类似的形式？）

：困惑：谢谢你的建议

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

---

如果不使用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>

$（'#fileAPITesting'）.bind（'submit'，函数（e）{
e、 预防默认值（）；
文件处理（document.getElementById（'fileInput'）；
});
setStatusArea（）；

在这里，jQuery表单插件变得非常方便。同样值得注意的是，如果您链接到用于jQuery的Google代码存储库，您很有可能不会给页面增加开销，因为许多其他页面都使用jQuery，而jQuery将位于用户的缓存中。以下是该页面的链接：

我的表单还有许多其他要求，但下面是我的后端页面示例：

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

函数文件处理（fileToProcess）{
//抓取文件信息一次只允许一个文件
//在IE中，必须以不同的方式抓取
if（window.File）{
file=fileToProcess.files[0]；
clearForm（假）；
如果（文件）{
fileLength=file.size；
fileName=file.name；
totalBLObs=Math.ceil（（文件长度/每个块的字节数））；
初始化信息（）；
$（“#停止”）.toggle（）；
隐藏按钮（）；
$（“#暂停”）.toggle（）；
fileSending（）；
}否则{
statusField（“未选择文件”）；
}
}否则{
//如果没有文件API，我们必须将整个表单提交到iframe
file=fileToProcess；
clearForm（假）；
fileAPI=false；
时间=新日期（）；
if（file.value）{
//我无法正确处理这一信息
隐藏按钮（）；
fileName=file.value；
fileName=fileName.substr（fileName.lastIndexOf（'\\'）+1）；
statusField（“
未实现文件API”。+
“
正在尝试仅具有启动和停止状态的替代方法”+
“
开始于：”+time.toLocaleTimeString（））；
$（'#fileAPITesting'）。ajaxSubmit({
提交前：函数（a、f、o）{
o、 数据类型='string'；
试试{
$（'#uploadOutput'）.html（'
提交…'）；
$（'#uploadOutput'）.show（）；
}捕获（e）{
statusField（“
提交…”）；
}
},
成功：函数（数据）{
if（typeof data=='object'&&data.nodeType）
data=elementToString（data.documentElement，true）；
else if（数据类型=='object'）
数据=目标定位（数据）；
时间=新日期（）；
statusField（“+time.toLocaleTimeString（）处的“
”+data+”；
试一试{
$（“#进度”）.hide（）；
$（'#progress'）.html（''）；
}捕获（e）{
//#进步是不存在的
}
}
});
}否则{
statusField（“未选择文件”）；
}
}   
};

---

希望这会让你走上正确的道路。

嗨，詹姆斯，谢谢你迄今为止的回答！是的，我也非常喜欢使用ajax！但是在这种情况下，我想我的问题更大：因为，如何从文件输入字段“捕获”文件并通过Ajax发送？在其他情况下，我使用新的FormData（）-对象，但在这里我不知道如何将文件放在那里@如果你不需要支持IE，那么文件API就是一流的。然而，为了与IE具有向后兼容性，您必须通过iframe实现faux AJAX。这里有两个很好的文件API资源：---非常感谢。。我找到了这些