Php 如何使用ajax上传图像并预览它

我正在尝试使用ajax将图像上传到images文件夹，但它不起作用 当我选择一个图像，然后图像应该上传到我的文件夹在本地硬盘驱动器，进一步我会使用它

请帮帮我

我的代码是：

脚本

---

这是我的代码，但是当我选择一个文件时，什么也没有发生。你不能直接使用AJAX上传图像

答案是针对这一点：

data: "name = <?php echo $_FILES['imgPath']['name']; ?>&type=<?php echo $_FILES['imgPath']['type']; ?>&tmp_name=<?php echo $_FILES['imgPath']['tmp_name']; ?>",

data:“name=&type=&tmp_name=”，

使用AJAX直接上传图像是不可能的，但有些库可以创建动态iFrame来实现这一点

---

看看这个，我已经在几个项目中使用过：。它甚至还附带了一些PHP应用程序框架的服务器端代码示例。

您不能使用

AJAX

上传文件，您需要使用一个技巧，包括

'iframe'

和

web表单

，还有一些

javascript

可能会对您有所帮助。

如果您想在这里使用，您还可以查看示例和示例代码，例如-

$(function() {
$("#file_upload").uploadify({
    'formData'      : {'someKey' : 'someValue', 'someOtherKey' : 1},
    'swf'           : '/uploadify/uploadify.swf',
    'uploader'      : '/uploadify/uploadify.php',
    'onUploadStart' : function(file) {
        $("#file_upload").uploadify("settings", "someOtherKey", 2);
    }
});
});

$("#image_upload2").uploadify(uploadifyBasicSettingsObj);

uploadifyBasicSettingsObj.onUploadSuccess = function(file, data, response) 
{
    $('.tempImageContainer2').find('.uploadify-overlay').show();

    /* Here you actually show your uploaded image.In my case im showing in Div  */
    $('.tempImageContainer2').attr('style','background- image:url("../resources/temp/thumbnail/'+data+'")');
    $('#hidden_img_value2').attr('value',data);
}

HTML代码：

<div class="boxWrapper tempImageContainer2" data-image-container-id="2">
   <input type="file"  accept="gif|jpg" name="image2" style="" id="image_upload2"/>
   <input type="hidden" value="" name="image[]" id="hidden_img_value2">
   <input type="hidden" name="upload_path" value="" id="upload_path2" class="upload_path">
   <div class="uploadify-overlay">Change</div>
   <a class="remove-pic-link" href="javascript:void(0)" style="display:none">Remove</a>
 </div>

改变

HTML

<form method="POST" action="tabs.php?page=HOME" enctype="multipart/form-data">
<table>
<tr>
<td><label>Choose Image</label></td>
<td><input type="file" id ="pathAbout" name="imgPath" /></td>
</tr>

</table>
</form>

<div class="field">
    <label class="w15 left" for="txtURL">Logo:</label>
    <img id="logoPreview" width="150px" height="150px" src='default.jpg' />
    <input class="w60" type="file" name="txtURL" id="txtURL" />
</div>

Ajax控制器：

public function uploadImage()
    {
        $status = "";
        $msg = "";
        $filename='';
        $file_element_name = 'txtURL';//Name of input field


        if (empty($_POST['title'])){
            $status = "error";
            $msg = "Please enter a title";
        }

        if ($status != "error"){

            $targetPath = ''.date('Y').'/'.date('m').'/';

            if(!file_exists(str_replace('//','/',$targetPath))){
                mkdir(str_replace('//','/',$targetPath), 0777, true);
            }

            $config['upload_path'] = $targetPath;
            $config['allowed_types'] = 'jpg|png|jpeg';
            $config['max_size'] = 150000;
            $config['file_name']=time(); //File name you want
            $config['encrypt_name'] = FALSE;

            $this->load->library('upload', $config);
            $this->upload->initialize($config);

            if(!$this->upload->do_upload($file_element_name)){
                $status = 'error';
                $msg = $this->upload->display_errors('', '');
            }
            else{
                $data = $this->upload->data();
                $filename = $targetPath.$data['file_name'];
            }
            //@unlink($_FILES[$file_element_name]);
        }

        echo json_encode(array('status' => $status, 'msg' => $msg,'path'=>$filename));
    }

---

添加

有很多ajax文件上传程序，只需谷歌就可以了。

<div class="field">
    <label class="w15 left" for="txtURL">Logo:</label>
    <img id="logoPreview" width="150px" height="150px" src='default.jpg' />
    <input class="w60" type="file" name="txtURL" id="txtURL" />
</div>

$('#txtURL').on('change', function(){

    $.ajaxFileUpload({
           type         :   "POST",
           url          :   "ajax/uploadImage",
           dataType     :   "json",
           fileElementId:   'txtURL',
           data         :   {'title':'Image Uploading'},
           success      :   function(data){

                $('#logoPreview').attr('src', data['path']);
               },
           error        :   function(data, status, e){
                alert(e);
               }                
           });

});

public function uploadImage()
    {
        $status = "";
        $msg = "";
        $filename='';
        $file_element_name = 'txtURL';//Name of input field


        if (empty($_POST['title'])){
            $status = "error";
            $msg = "Please enter a title";
        }

        if ($status != "error"){

            $targetPath = ''.date('Y').'/'.date('m').'/';

            if(!file_exists(str_replace('//','/',$targetPath))){
                mkdir(str_replace('//','/',$targetPath), 0777, true);
            }

            $config['upload_path'] = $targetPath;
            $config['allowed_types'] = 'jpg|png|jpeg';
            $config['max_size'] = 150000;
            $config['file_name']=time(); //File name you want
            $config['encrypt_name'] = FALSE;

            $this->load->library('upload', $config);
            $this->upload->initialize($config);

            if(!$this->upload->do_upload($file_element_name)){
                $status = 'error';
                $msg = $this->upload->display_errors('', '');
            }
            else{
                $data = $this->upload->data();
                $filename = $targetPath.$data['file_name'];
            }
            //@unlink($_FILES[$file_element_name]);
        }

        echo json_encode(array('status' => $status, 'msg' => $msg,'path'=>$filename));
    }