dowdw44426
2016-07-08 10:41 阅读 110

如何在JQuery页面上获取文件类型数据(图像)并发送到PHP页面进行图像上传

I want to upload an image using jQuery asynchronously with data... but cannot upload it... Only data variables can be fetch there in process page but cannot get the image file using $_FILES......

img_upload.php

<form name="frm" id="frm" novalidate enctype="multipart/form-data">
    <input type="text" id="txt_name" name="txt_name" /> 
    <input type="file" name="img_upload" id="img_upload">   
</form>

img_upload.js

$(function() {

    $("#frm_edit input, #frm_edit textarea").jqBootstrapValidation({
        preventSubmit: true,
        submitSuccess: function($form, event) {
            event.preventDefault(); // prevent default submit behaviour

        var txt_name =  $("input#txt_name").val();

        var FileImgData = $('#img_upload').prop('files')[0];   
        var form_data = new FormData();                  
        form_data.append('file', FileImgData);

            $.ajax({
                url: "./img_upload_p.php",
                type: "POST",
                data: {
                    txt_name: txt_name,
                    upload_photo: FileImgData
                },
                cache: false,
            })
        },
    });  
});

img_upload_p.php

$str_name="";    
if(isset($_POST["txt_name"])) { $str_name=trim($_POST["txt_name"]); }  

$str_upload_photo="";  
if(isset($_FILES['file_photo']))
{ $str_upload_photo = trim($_FILES['file_photo']['name']); }

Please suggest me that image variable declared (upload_photo: FileImgData) in JQuery file "img_upload_p.js" is correct or not.

Also, the way image file variable is fetched in "img_upload_p.php" is correct or not.

if any of them are wrong then how can I assign that image variable in JQuery file and fetch in PHP process page...

PHP image upload code is ready and in working condition... but just having issue with above two mentioned points...

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

2条回答 默认 最新

  • 已采纳
    doushu9253 doushu9253 2016-07-11 11:30

    img_upload.js

    $(function() {
    
        $("#frm_edit input, #frm_edit textarea").jqBootstrapValidation({
            preventSubmit: true,
            submitSuccess: function($form, event) {
                event.preventDefault(); // prevent default submit behaviour
    
                var formData = new FormData();
                formData.append("hdn_pkid", $("input#hdn_pkid").val()); // if hidden variable is passed             
                formData.append("txt_name",$("input#txt_name").val()); // if other input types are passed like textbox, textarea, select etc...
                formData.append('img_upload', $('input[type=file]')[0].files[0]); // if image or other file is passed
    
                $.ajax({
                    url: "./img_upload_p.php",
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    cache: false,
                })
            },
        });  
    });
    

    img_upload_p.php

    • Get all variables' value using POST method and store them in new variables to use and process on this page as usual.

    • Get file variable like below mentioned code and then upload image using normal PHP function or your own way.

      if(isset($_FILES['img_upload']))
      { $str_ = trim($_FILES['img_upload']['name']); }
      
    点赞 评论 复制链接分享
  • dooid3005 dooid3005 2016-07-08 10:53

    One of the best way to do this is use Dropzone js, this is a best library for uploading files using ajax and it also provides progress bar. You can use your own PHP(or any other server side language) code at server side.

    I hope it will helpful.

    点赞 评论 复制链接分享

相关推荐