在字段的更改事件上上传图像


image upload on change event of field

我正在使用表单操作事件在服务器上加载图像,如何识别方法的返回,以便我可以使用该图像设置画布元素的背景图像???

<form id="imageform" class="form-horizontal" action="ajaximage.php" method="post" enctype="multipart/form-data"  >
                            <div class="control-group">
                                <label class="control-label" for="InputImage">Upload Image for Liberary</label>
                                <div class="controls">
                                    <span class="btn btn-file">
                                        <input type="file" name="photoimg" id='fileImage' class="fileUpload" required />
                                        <div  id='preview' style=""></div> <!-- style="width: 90px;" onchange="this.style.width = '100%';"  <div  id='categoryImage' style='border:1px solid black; height:20px' ></div> --> <div  id='libImage' style="display: none"></div> <div  id='preview'></div> </span>
                                </div>
                            </div>
                        </form>

Ajaximage.php

$valid_formats = array("jpg", "png", "gif", "bmp");
    if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
        {
            $name = $_FILES['photoimg']['name'];
            $size = $_FILES['photoimg']['size'];
            //echo "<script>alert(".$name.")</script>";
            if(strlen($name))
                {
                    list($txt, $ext) = explode(".", $name);
                    if(in_array($ext,$valid_formats))
                    {
                    if($size<(1024*1024))
                        {
                            $actual_image_name = $txt.".".$ext;
                            $tmp = $_FILES['photoimg']['tmp_name'];
                            if(move_uploaded_file($tmp, $path.$actual_image_name))
                                {
                                    echo "<img src='../products/".$actual_image_name."'  class='preview'>";
                                }
                            else
                                echo "failed";
                        }
                        else
                        echo "Image file size max 1 MB";                    
                        }
                        else
                        echo "Invalid file format..";   
                }
            else
                echo "Please select image..!";
            exit;
        }

您可以使用以下代码和jQuery触发更改事件

$("document").ready(function(){
    $("#fileImage").change(function() {
           $( "#imageform" ).submit();
    });

});

或者你也可以使用它

$('#fileImage').on("change", function(){ $( "#imageform" ).submit(); });

见小提琴