如何使用jQuery ajax和PHP上传文件（无需点击任何提交按钮） [英] How to upload file using jquery ajax and php (without clicking any submit button)

问题描述

我有这样的表格：

 < form method =postclass =form_cnvc> 
< p>< input type =textname =f_nmvalue =placeholder =输入您的名字>< / p> 
< p>< input type =textname =l_nmvalue =placeholder =输入您的姓氏>< / p> 
< div class =dropfile visible-lg> 
< input type =fileid =image_file_inputname =image_file_input> 
< span>选择图片（.jpg，.png，.bmp文件）< / span> 
< / div> 
< p class =submit>< input type =submitname =submitvalue =post>< / p> 
< / form> 
  

我希望当用户选择一个图像时，它会自动提交到我的PHP页面我可以将它保存在数据库中，并返回一个insert_id与图片的缩略图。

我想用jQuery来做，但不能这样做。 PHP的代码是：

解决方案

输入Element，然后在里面做一个ajax-request：

$ $ $ $ $ $image_file_input> change（function（）{
$ .ajax（{
url：my-target-url.php，
type：post，
dataType：'json'，
processData：false ，
contentType：false，
data：{file：$（＃image_file_input）。val（）}，
成功：函数（text）{
if（text = =成功）{
alert（您的图片上传成功）;
}
}，
错误：function（）{
警报（发生错误，请重试。）;
}
}）;
}）;

创建一个url或路由并在url：tag（domain / file.php）处输入代码服务器的东西：

pre code $ function $ process
foreach（$ _文件作为$文件）{
//做任何你想要的文件，保存在数据库或东西...
// $ file [name];
// $ file [tmp_name];
//在这里插入bla blubb
echosuccess;
}
}
die（）;
}

I have a form like this:

<form method="post" class="form_cnvc">
   <p><input type="text" name="f_nm" value="" placeholder="type your first name"></p>
   <p><input type="text" name="l_nm" value="" placeholder="type your last name"></p>
   <div class="dropfile visible-lg">
   <input type="file" id="image_file_input" name="image_file_input">
   <span>Select Images(.jpg , .png, .bmp files) </span>
   </div>
   <p class="submit"><input type="submit" name="submit" value="post"></p>
 </form>

I want that when the user will selects an image, it would be automatically submitted to my PHP page so that I can save it in the database and return an insert_id with the thumbnail of the picture.

I want to do it using jQuery but not able to do so.

PHP code is:

解决方案

Easy, use a change trigger on your input Element and do an ajax-request inside:

$("#image_file_input").change(function() { 
    $.ajax({
        url: "my-target-url.php",
        type: "post",
        dataType: 'json',
        processData: false,
        contentType: false,
        data: {file: $("#image_file_input").val()},
        success: function(text) {
            if(text == "success") {
                alert("Your image was uploaded successfully");
            }
        },
        error: function() {
            alert("An error occured, please try again.");         
        }
    });   
});

Create a url or route and enter it at url: tag (domain/file.php) and then code serversided stuff:

function processFileUpload() {
    if(count($_FILES) > 0) {
        foreach($_FILES as $file) {
            //DO whatever you want with your file, save it in the db or stuff...
            //$file["name"];
            //$file["tmp_name"];
            //Insert here bla blubb
            echo "success";
        }
    }
    die();
}

这篇关于如何使用jQuery ajax和PHP上传文件（无需点击任何提交按钮）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！