Question

I am not familiar with this problem I am facing.. I would like to upload image file through ajax & php

so far I have done these: HTML:

<input type="file" name="file" id="file" class="inputfile">
<label for="file">Choose a file</label>

ajax:

jQuery(document).ready(function($) {
var data = {

                business_name: $('#business_name').val(),
                business_country: $('#business-country').val(),
                business_region: $('#business-region').val(),
                business_phone: $('#business_phone').val(),
                //business_image: $('#image-data').val(),
                business_image: $('#file').val(),
                token: $('#token').val()
            }
$.ajax({
                type: "POST",
                data: data,
                url: "index.php?route=account/profile/savetoken=" + data.token,
            success: function(data) {
                $("#containerAlertMessages").html("<div id='alertMessages' class='alert alert-success'><strong>Success!</strong> Your profile has been successfully saved!</div>");
                }
            });    
});

I could get the path name of the image and store it to database.. But I could not upload the image on e specific folder..

I am using MVC model like openCart.. Actually I got the structure of OC, and building a dashboard from it..

Is there any way of using the tools already OC have like:

$this->load->model('tool/image');

otherwise, how could I upload images? serialize the form or something?

please be specific as possible so I could understand!

thanks in advance!

Answer 1

好吧我解决了我自己的问题的错误/错误。我实际上了解了很多关于openCart如何上传图片，ajax和xhr如何工作等等。无论如何，我使用的代码是：

内部档案profile.tpl：

$('#upload-image').on('click',function(e){
    var formData = new FormData($('#submitProfile')[0]);
    formData.append('route','account/profile');
    $.ajax({
        url: 'index.php?route=tool/upload/logo',
        type: 'post',
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        beforeSend: function() {
          $("#containerAlertMessages").html("<div class='alert alert-info'><strong>Sending...</strong></div>");
                    $("#containerAlertMessages").removeClass("containerAlertMessages").addClass("containerAlertMessagesVisible");
        },
        complete: function() {
            $("#containerAlertMessages").html("<div id='alertMessages' class='alert alert-success'><strong>Success!</strong> Your logo has been uploaded successfully! Do not forget to save the abovr information by clicking the Save button at the bottom right corner!</div>");
            $("#containerAlertMessages").removeClass("containerAlertMessages").addClass("containerAlertMessagesVisible");
        },
        success: function() {
            //nothing yet
        },
        error: function(xhr, ajaxOptions, thrownError) {
          alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
      });
    });

内部文件upload.php：

public function logo() {
        $this->load->language('tool/upload');

        if (!empty($this->request->files['file']['name']) && is_file($this->request->files['file']['tmp_name'])) {
            $filename = html_entity_decode($this->request->files['file']['name'], ENT_QUOTES, 'UTF-8');


            $route = $this->request->post['route'];
            if($route == "account/profile") {
                $file = "image/" . $filename;
                move_uploaded_file($this->request->files['file']['tmp_name'], DIR_LOGOS . $file);
            }
        }
    }

已在 config.php文件中定义了DIR_LOGOS，因此如果需要，我可以在另一个文件中再次使用此变量。
此外，我正在发送路由变量，以便了解图片上传的来源。因此，如果上传来自“帐户/个人资料”，我将图片保存到“/ image”文件夹如果它来自'accoun / register'我将保存到'/ image / register'或我想要的任何文件夹（现有或不存在），等等

我希望能帮助某些人，同样的问题！

Answer 2

我使用此代码

index.php

if (!empty($this->request->files)) {
    foreach ($this->request->files as $key => $file) {
        if (!empty($file['name']) && is_file($file['tmp_name'])) {
            $filename = date('YmdHis') . rand(0,10000) . html_entity_decode($file['name'], ENT_QUOTES, 'UTF-8');
            move_uploaded_file($file['tmp_name'], "image/".$filename);
        }
    }
}

main.js

$('#pForm').on('submit',function (e) {
    e.preventDefault();

    $.post({
        url: 'index.php?route=ajax/index',
        data: new FormData(this),
        cache:false,
        contentType: false,
        processData: false,
        success: function () {
            //To do something
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });
})

upload image file through ajax and php

2 个答案: