没有重定向的jquery文件上传

时间:2015-09-22 19:08:57

标签: javascript jquery html html5

我知道我无法使用jquery上传文件,所以我想出了这个解决方案:

    var ifframe = $("<iframe></iframe>");
    var input = $('<input type="file" id="file" name="file" size="10"/>');
    var form = $('<form action="/upload" method="post" enctype="multipart/form-data"></form> ');
    form.append(input);
    ifframe.append(form);
    input.change(function(){
        form.submit();
    }
    );
    input.trigger("click");

基本上我尝试创建一个表单,将iframe和触发器单击文件字段,以便为用户提供一个可以选择图像的窗口。然后表单会自动提交,并且主页面不会被重定向,因为表单位于iframe中。问题是主页面确实被重定向。有人可以帮帮我吗?

1 个答案:

答案 0 :(得分:3)

实际上,JQ可以提交表格。异步附件。看看这个例子。比iframe方法好多了。

 $("#addProductForm").submit(function (event) {
    event.preventDefault();
    //grab all form data  
    var formData = $(this).serialize();

 $.ajax({
        url: 'addProduct.php',
        type: 'POST',
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function (returndata) {
        $("#productFormOutput").html(returndata);
        alert(formData);
        },
        error: function(){
            alert("error in ajax form submission");
            }
    });

    return false;
    });