php - 如何使用ajax上传图片并预览

Question

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

请帮助我

我的代码是:

脚本

$(document).ready(function() { 
$('#pathAbout,#path,#pathWork').change(function(){
if($(this).val() !=""){
    $.ajax({
       type: "POST",
       url: "imageLoad.php", 
       data: "name = <?php echo $_FILES['imgPath']['name']; ?>&type=<?php echo $_FILES['imgPath']['type']; ?>&tmp_name=<?php echo $_FILES['imgPath']['tmp_name']; ?>",
       success: function(msg){
        alert(msg);
       }
     });
}
});
}); 
</script>

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>

PHP

if(!empty($_POST)) {
if((isset($_POST['name']) && $_POST['name'] != '') || (isset($_POST['type']) && $_POST['type'] != '') ||(isset($_POST['tmp_name']) && $_POST['tmp_name'] != ''))
{
$name = $_POST['name'];
$type = $_POST['type'];
$tmp_name = $_POST['tmp_name'];
$extension = strtolower(substr($name, strpos($name , '.') +1));
if(($extension == 'png' || $extension == 'jpeg' || $extension == "jpg")&&($type == "image/png" || $type == "image/jpeg" || $type == "image/jpg"))
{
    $location = 'images/';
    if(move_uploaded_file($tmp_name,$location."$name"))
        {
            echo "Loaded";
        } else {
            echo "Error occured";
        }
} else {
    echo "Unsupported file format";
}
} else {
    echo "Please choose a file";
}
} else {
echo "No Information found";
}

这是我的代码，但当我选择文件时没有任何反应

Answer 1

如果您愿意，可以使用Uploadify在这里您还可以看到演示和示例代码，例如-

$(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>