Question

您能告诉我如何在没有刷新页面的情况下上传和可视化图像吗？例如：

当我单击“ +”时，我可以上传图像，并且图像现在正在可视化（没有刷新页面）。这是我的php代码：

public function create() {
        $this->requireSession();
        $this->load->model('store_model');

        $visible = 0;
        if($this->input->post('is_visible') == 'on') {
            $visible = 1;
        }

        $promotion = 0;
        if($this->input->post('is_promotion') == 'on') {
            $promotion = 1;
        }

        $internal = 0;
        if($this->input->post('is_internal') == 'on') {
            $internal = 1;
        }

        $userId = $this->authorization->getUserId();
        $storeId = $this->authorization->getStore();

        $price = $this->input->post('price');
        $prev_price = $this->input->post('prev_price');
        if($promotion == 1) {
            $price = $this->input->post('prev_price');
            $prev_price = $this->input->post('price');
        }

        date_default_timezone_set('Europe/Sofia');

        $data = array( 
            'name' => $this->input->post('name'),
            'description' => $this->input->post('description'),
            'price' => $price,
            'currency' => 'BGN',
            'is_promotion' => $promotion,
            'promotion_price' => $prev_price,
            'quantity' => $this->input->post('quantity'),
            'status' => $this->input->post('status'),
            'main_image' => 0,
            'is_internal' => $internal,
            'is_visible' => $visible,
            'url_address' => $this->input->post('url'),
            'total_views' => 0,
            'total_likes' => 0,
            'total_comments' => 0,
            'product_added' => date("Y-m-d H:i:s"),
            'is_active' => 1,
            'category_id' => $this->input->post('category_id'),
            'user_id' => $this->authorization->getUserId(),
            'store_id' => $storeId,
            'brand_id' => $this->input->post('brand_id')
        );

        $this->db->insert("products", $data);
        $product_id = $this->db->insert_id();

        $this->db->query("UPDATE categories SET total_products = total_products + 1 WHERE id = " . $this->input->post('category_id'));
        $this->db->query("UPDATE stores SET total_products = total_products + 1 WHERE id = " . $storeId);
        $this->db->query("UPDATE users SET total_products = total_products + 1 WHERE id = " . $userId);

        $tags = $this->input->post('tags');
        $this->load->model('tag_model');
        $this->tag_model->updateTags($tags, $product_id);

        $this->load->model('category_model');
        $this->load->model('attribute_model');
        $attributes = $this->category_model->getOnlyAttributes($this->input->post('category_id'));
        $values = array();
        foreach($attributes as $row) {
            $values[] = array('product_id' => $product_id, 'attribute_value_id' => $this->input->post('attribute_id' . $row->attribute_id));
        }
        if($attributes) {
            $this->attribute_model->updateProductAttributes($values, $product_id);
        }

        if($_FILES["fileToUpload"]["tmp_name"]) {
            $uploadOk = 1;
            //$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
            // Check if image file is a actual image or fake image
            $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
            if($check !== false) {
                $uploadOk = 1;
            } else {
                $uploadOk = 0;
            }
            // Check file size
            if ($_FILES["fileToUpload"]["size"] > 500000) {
                $uploadOk = 0;
            }
            // Allow certain file formats
            /*if($imageFileType != "jpg") {
               $uploadOk = 0;
            }*/
            // Check if $uploadOk is set to 1
            if ($uploadOk == 1) {
                $this->db->insert('products_images', array('product_id' => $product_id));
                $insert = $this->db->insert_id();

                $target_dir = "./" . p_image_path();
                $target_file = $target_dir . '/' . $insert . '.jpg';
                move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file);
                $this->db->update("products", array('main_image' => $insert), array('id' => $product_id));

            }
        }

        redirect(site_url('mystore/products/edit/' . $product_id));

这是我的html代码：

<div class="item-card">
                                <div class="card-section">
                                    <div class="clearfix">
                                        <!---<div class="pull-right">
                                        <input type="file" name="fileToUpload" id="fileToUpload">
                                        </div>---->

                                        <div class="pull-right">
                                        <span class="btn btn-white upload_image" type="file"  id="fileToUpload">Upload image</span>
                                        <input class="upload_file" type="file" name="fileToUpload" id="fileToUpload" style="display:none;">
                                        </div>

                                        <h2 class="al">Images</h2>
                                    </div>
                                    <hr />
                                    <div class="item-images clearfix">
                                        <div class="empty-text">
                                            Upload images
                                        </div>
                                    </div>
                                </div>
                            </div>

以及显示图像时的div类：

<script type="text/template" id="tpl-product-image">
    <div class="col-sm-6 col-md-4 item-thumb" data-idx="{{fileId}}">
        <div class="image-holder thumbnail">
            <div class="preview">
                <img src="{{fileUrl}}" />
            </div>
            <div class="caption clearfix">
                <label class="pull-left">
                    {{#is_main}}
                    <input type="checkbox" class="uniform check-main" data-idx="{{fileId}}" checked />
                    {{/is_main}}
                    {{^is_main}}
                    <input type="checkbox" class="uniform check-main" data-idx="{{fileId}}" />
                    {{/is_main}}
                     Заглавна
                </label>
                <button class="remove-image btn btn-white pull-right" data-idx="{{fileId}}">
                    <i class="glyphicon glyphicon-trash"></i>
                </button>
            </div>
        </div>
    </div>
</script>

和JQUERY：

$('.upload_image').click(function() {
        $(".upload_file").trigger("click");    
    });

Answer 1

使用更改事件，然后获取文件并发送到PHP文件像下面一样

 $('#fileToUpload').on("change", function () {
        var file = $("#fileToUpload").prop("files")[0];
        var data = new FormData();
        data.append('fileName', file);
            });
                    $.ajax({
                    url: "urlPHPFILE",
                    type: "POST",
                    data: data,
                    dataType : 'json',
                    processData: false,
                    contentType: false,
                    cache: false,
                    success:function(data){

                    },
                    error:function(err){
                        console.error(err);
                    }
                });

php文件

$file = $_POST['fileName']

上传后，如果要执行某些操作，则必须使用成功功能

在PHP文件中，您必须备份Url补丁程序映像并获得成功功能。

PHP文件

.
.//If the file was successfully uploaded
 $status = array('status' => "success", "urlPatchImage" => $UrlPatch);
 return $status;
.
.
.

jquery代码

.
  success:function(data){
       var urlPatchImage = data.urlPatchImage;
  $("#image").attr("src", urlPatchImage );
 },
.
.

html

<img id="image" src="">

Answer 2

关键是使用jquery库中的AJAX功能

从jquery网站下载下面给出的脚本。

使用AjaxUpload功能。请遵循本教程以获取更多详细信息：https://css-tricks.com/ajax-image-uploading/

如何在php中没有刷新页面的情况下上传（和可视化）图像？

2 个答案: