阿贾克斯上传图片 [英] Ajax Upload image

问题描述

问题1我会以这种形式转化为阿贾克斯，但好像我的ajax code没啥事。 在提交根本不进行任何操作。

Q2。我也希望函数开火变化时，该文件已选择不等待提交。

在这里有JS。

  $（'＃imageUploadForm'）。在（'提交'，（功能（E）{
    即preventDefault（）
    $阿贾克斯（{
        键入：POST，
        网址：$（本）.attr（行动），
        数据：$（本）.serialize（）
        缓存：假的
    }）;
}））;
 

和使用PHP的HTML。

 ＆LT;表格名称=照片ID =imageUploadFormENCTYPE =多部分/表单数据行动=＆LT; PHP的echo $ _ SERVER [PHP_SELF]; ？＆gt;中方法=后＆GT;
    ＆LT;输入类型=文件的风格=寡妇：0;身高：0ID =ImageBrowse隐藏=隐藏名称=形象大小=30/＆GT;
    ＆LT;输入类型=提交名称=上传值=上传/＆GT;
    ＆LT; IMG WIDTH =100的风格=边界：＃000;的z-index：1;位置：亲属;边框宽度：2px的;浮动：左的高度=100px的SRC =＆LT; PHP的echo $ 。upload_path $ large_image_name $ _ SESSION ['user_file_ext'];？＆gt;中ID =缩略图/＆GT;
＆LT; /形式GT;
 

解决方案

先在你的Ajax调用包括成功和放大器;误差函数，然后检查是否它给你错误还是什么？

您code应该是这样的。

  $（文件）。就绪（函数（五）{
    $（'＃imageUploadForm'）。在（'提交'，（功能（E）{
        即preventDefault（）;
        VAR FORMDATA =新FORMDATA（本）;

        $阿贾克斯（{
            键入：POST，
            网址：$（本）.attr（行动），
            数据：FORMDATA，
            缓存：假的，
            的contentType：假的，
            过程数据：假的，
            成功：功能（数据）{
                的console.log（成功）;
                的console.log（数据）;
            }，
            错误：功能（数据）{
                的console.log（错误）;
                的console.log（数据）;
            }
        }）;
    }））;

    $（＃ImageBrowse）。在（变，函数（）{
        $（＃imageUploadForm）提交（）。
    }）;
}）;
 

Q.1 I would to convert this form to ajax but it seems like my ajax code lacks something. On submit doesn't do anything at all.

Q2. i also want the function to fire on change when the file has been selected not to wait for a submit.

here there JS.

$('#imageUploadForm').on('submit',(function(e) {
    e.preventDefault()
    $.ajax({
        type:'POST',
        url: $(this).attr('action'),
        data:$(this).serialize(),
        cache:false
    });
}));

and the HTMl with php.

<form name="photo" id="imageUploadForm" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
    <input type="file" style="widows:0; height:0" id="ImageBrowse" hidden="hidden" name="image" size="30"/>
    <input type="submit" name="upload" value="Upload" />
    <img width="100" style="border:#000; z-index:1;position: relative; border-width:2px; float:left" height="100px" src="<?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?>" id="thumbnail"/>
</form>

解决方案

first in your ajax call include success & error function and then check if it gives you error or what?

your code should be like this

$(document).ready(function (e) {
    $('#imageUploadForm').on('submit',(function(e) {
        e.preventDefault();
        var formData = new FormData(this);

        $.ajax({
            type:'POST',
            url: $(this).attr('action'),
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            success:function(data){
                console.log("success");
                console.log(data);
            },
            error: function(data){
                console.log("error");
                console.log(data);
            }
        });
    }));

    $("#ImageBrowse").on("change", function() {
        $("#imageUploadForm").submit();
    });
});

这篇关于阿贾克斯上传图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！