通过ajax和php上传图像文件 [英] upload image file through ajax and php

问题描述

我不熟悉遇到的这个问题..我想通过ajax& php

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

到目前为止，我已经完成了这些操作: HTML:

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..

我正在使用像openCart这样的MVC模型.实际上，我得到了OC的结构，并从中构建了一个仪表板.

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

有什么方法可以使用OC已有的工具:

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!

提前谢谢！

推荐答案

好，我解决了有关自己问题的问题.我实际上对openCart如何上传图像，ajax和xhr的工作原理等了解很多.无论如何，我使用的代码是这样的:

ok I solved my issue/error about my own question. I understood a lot actually about how openCart upload images, how ajax and xhr works and so on. Anyway, the code I have used is this:

内部文件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);
            }
        }
    }

• DIR_LOGOS已在 config.php文件中定义，因此，如果需要，我可以在另一个文件中再次引用该变量.
• 此外，我正在发送route变量，以便了解从何处上传图像. 因此，如果上传来自帐户/配置文件"，则将图像保存到"/image"文件夹 如果它来自"accoun/register"，我要保存到"/image/register"或我想要的任何文件夹(是否存在)，依此类推
• DIR_LOGOS has been defined inside config.php file, so I could reffer to this variable again in another file if I want it to.
• Furthermore, I am sending the route variable, in order to know from where the image upload is coming. So, if the uploading is coming from 'account/profile' I am saving the image to '/image' folder if its coming from 'accoun/register' I am saving to '/image/register' or whatever folder I want to (existing one or not), and so on

我希望对遇到同样问题的人有所帮助！

I hope that helps someone, with same issues!

这篇关于通过ajax和php上传图像文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！