Question

当我删除jquery脚本代码并提交时，代码成功上传文件。但是使用以下代码，输出div中的文本将消失，而其他页面中的新文本也不会写入。

<script type="text/javascript">
$(document).ready(function(){
    $("[name='video-submit']").click(function() { 
        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            data: $("#VideoForm").serialize(),
            url: "cp.cs.asp?Process=UploadVideo",
            success: function(output) {
                $("#output").html(output);
            },
            error: function(output) {
                $("#output").html(output);
            }
        }); //close $.ajax(
    });
});
</script>
  <div id="form">
        <form  method="post" id="VideoForm">
            <fieldset>
            <div class="required">                
                <label for="VideoURL">Video File</label>
                <input type="file" size="23" name="VideoFile">
                <input type="button" name="video-submit" id="video-submit" value="Upload" />
            </div>
            </fieldset>
        </form>
            <div id="output">
            fds
            </div>

Answer 1

您无法使用$("#VideoForm").serialize()上传文件，因为这样只会序列化标准输入而不能序列化文件。您可能需要使用plugin。

顺便说一句，这很明显。想象一下，如果这是可能的话。如果您访问恶意站点，它可能会在未经用户同意的情况下从您的硬盘序列化和窃取文件。

Answer 2

您无法异步上传文件。

您可以尝试的一种方法是在页面中放置隐藏的iframe，表单应该指向此iframe：

<form method="post" action="cp.cs.asp?Process=UploadVideo" target="hiddenIframe">

<iframe style="display:none">

您的cp.cs.asp文件可以将文件上传到服务器，然后返回您刚刚上传的文件的路径，然后您可以使用您想要的值更新父页面，并根据需要显示上传的图像。通过这种方式，您可以上传文件，并且用户感觉它已经异步完成。

您可以查看此网站以获取一个简单示例。

http://www.openjs.com/articles/ajax/ajax_file_upload/

服务器代码使用PHP，但您可以轻松地将其应用于ASP，ASP.NET，ASP.NET MVC等...

希望它有所帮助！

使用jquery上传文件（不使用flash插件）

2 个答案: