Question

我正在使用jquery form上传图片而不刷新页面。以下是html标记：

    <a href="javascript:void(0);" onclick="UpdateImage();"> 
<img src="@_fullImgPath" name="img-uploader" alt="" title="" /></a>

    @using (Html.BeginForm("UpdateImage", "Profile", FormMethod.Post, new { id = "img-file-upload-form", @class = "form", autocomplete = "off", enctype = "multipart/form-data" }))
    {
        @Html.Hidden("UpdateImageId")
        <input type="file" name="file" id="file" />
    }
    <script language="javascript" type="text/javascript">   
     $(function () {
        $("#img-file-upload-form").ajaxForm({
            iframe: true,
            dataType: "json",
            beforeSubmit: function () {
            },
            success: function (result) {
                alert('done');
            },
            error: function (xhr, textStatus, errorThrown) {
                alert('error');
            }
        });

        $("#file").change(function () {
             $("#img-file-upload-form").submit();
        });
    });

     function UpdateImage(id) {
            $("input[id=file]").click();
        }

    </script>

这在Firefox和Chrome中运行良好，但在IE 8和9中，它会抛出访问被拒绝错误。有没有解决这个问题？或者在没有页面刷新的情况下上传图像的任何替代方法？

Answer 1

您尝试的是在表单提交上保存图像。提交表单将对网页进行回发，因为我猜您的标记代表 MVC-3 Razor 。

我宁愿建议你使用以下的ajax请求。

   var submitForm=new Form();

将图片添加到表单控件

$.ajax({
    url:'webpage or your method in controller',
    type:'POST/GET',
    data:submitForm,
    dataType:'',
    ContentType:'',
    beforeSend:function(){},
    complete:function(){}, .....
});

用于创建动态表单标记，您可以参考以下链接
How to create a form dynamically using JavaScript?

自动文件上传使用jquery表单提交在IE中抛出访问被拒绝错误

1 个答案: