jQuery通过ajax上传并预览图片onchange，无需提交整个表单

Question

我想做的是通过显示上传的图像直到发布来保持表单原样，因为图像可以有标题。 (例如 Facebook 状态更新)

我的表单中有一些输入，因此我不能仅使用 .on('change') 进行上传。下面的内容是摘录，因为我的表格很长。

我没有包含我的 php 文件，因为它很长，如果我使用 #uploadForm 而不是 #uploadimages，它就可以工作

问题是，如何在提交表单之前只提交图像？ (因为我希望我的用户能够看到他们上传的图片的预览)

<form id="uploadForm" action="form.php" method="post" enctype="multipart/form-data">
    <textarea id="statustext" name="statustext"></textarea>
    <label>Upload Image File:</label><br/>
    <input id="uploadimages" name="images[]" type="file" multiple class="inputFile hidden"/>
    <div class="button" id="trigger">Upload File</div>
</form>

Ajax部分

<script type="text/javascript">
        $(document).ready(function (e) {
            $("#uploadimages").on('change', (function (e) { // Why it doesn't work?
                e.preventDefault();
                $.ajax({
                    url: "form.php",
                    type: "POST",
                    data: new FormData(this),
                    contentType: false,
                    cache: false,
                    processData: false,
                    success: function (data) {
                        $("#targetLayer").html(data);
                    },
                    error: function () {
                    }
                });
            }));
        });

        $("#trigger").click(function(){
            $("#uploadimages").click();
        });
    </script>

CSS

.hidden {
    display:none;
}

.button {
    border: 1px solid #333;
    padding: 10px;
    margin: 5px;
    background: #777;
    color: #fff;
    width:75px;
}

Answer 1

JSFIDDLE:http://jsfiddle.net/BradleyIW/tbe1xbzn/

我创建了一个新的上传表单供您使用，您需要添加一个十字图像，每次添加新图像并将其放置在其旁边时都会添加该图像 (x.png)。所有这些都是在本地完成的，您可以立即预览图像，然后在完成添加图像后提交表单。参见 fiddle 。

HTML

<div id="formdiv">
                    <h1 class="uploadH2">Upload Your Artwork</h1>
                <form enctype="multipart/form-data" action="" method="post">


                    <div id="filediv"><input name="file[]" type="file" id="file"/></div><br/>


                    <input type="button" class="add_more" id="add_more" value="Add More Files"/>

                    <input type="submit" value="Upload File" name="submit" id="img_upload" class="show-page-loading-msg" data-theme="b" data-textonly="false" data-textvisible="false" data-msgtext="" data-icon="arrow-r" data-iconpos="right"/>

                </form>

                <br/>

        </div>

JQUERY:

var abc = 0; //Declaring and defining global increement variable

$(document).ready(function() {

//To add new input file field dynamically, on click of "Add More Files" button below function will be executed
    $('#add_more').click(function() {
        $(this).before($("<div/>", {id: 'filediv'}).fadeIn('slow').append(
                $("<input/>", {name: 'file[]', type: 'file', id: 'file'}),        
                $("<br/><br/>")
                ));
    });

//following function will executes on change event of file input to select different file   
$('body').on('change', '#file', function(){
            if (this.files && this.files[0]) {
                 abc += 1; //increementing global variable by 1

                var z = abc - 1;
                var x = $(this).parent().find('#previewimg' + z).remove();
                $(this).before("<div id='abcd"+ abc +"' class='abcd'><img id='previewimg" + abc + "' src='' style='width:40%; height:40%;'/></div>");

                var reader = new FileReader();
                reader.onload = imageIsLoaded;
                reader.readAsDataURL(this.files[0]);

                $(this).hide();
                $("#abcd"+ abc).append($("<img/>", {id: 'delete', src: 'x.png', alt: 'delete'}).click(function() {
                $(this).parent().parent().remove();
                }));
            }
        });

//To preview image     
    function imageIsLoaded(e) {
        $('#previewimg' + abc).attr('src', e.target.result);
    };

    $('#upload').click(function(e) {
        var name = $(":file").val();
        if (!name)
        {
            alert("First Image Must Be Selected");
            e.preventDefault();
        }

    });
});

CSS:

@import url(http://fonts.googleapis.com/css?family=Droid+Sans);
body {
height:100%;
width:100%;
font-family:sans-serif;
color:black;
margin:0;
background-image:url(../img/upload.png);
}

#formdiv{
width:100%;
color:#fff;
text-align:center;
}
form{
    padding: 40px 20px;
    box-shadow: 0px 0px 10px;
    border-radius: 2px;
    width:100%;
}
.upload{
    border:1px solid #ff0000;
    color:#fff;
    border-radius:5px;
    padding:10px;
    text-shadow:1px 1px 0px green;
    box-shadow: 2px 2px 15px rgba(0,0,0, .75);
}
.upload:hover{
    cursor:pointer;
    background:#c20b0b;
    border:1px solid #c20b0b;
    box-shadow: 0px 0px 5px rgba(0,0,0, .75);
}

.uploadH2{margin-top:3%; font-size:36px;}

#file{
    color:green;
    padding:5px; border:1px dashed #123456;
    background-color: #f9ffe5;
}
#img_upload{
    margin-left: 45px;
}

#noerror{
    color:green;
    font-weight:bolder;
    text-align: left;
}
#error{
    color:red;
    font-weight:bolder;
    text-align: left;
}
#image img{ 
    width: 10%;
    border: none; 
    height:10%;
}

.abcd{
    text-align: center;
}

.abcd #previewimg {
    width:10%;
    height: 10%;
    border: 1px solid white;
}
.abcd #delete{
    width:3%;
    padding: 5px;
    border: 1px solid white;
}
b{
    color:red;
}

如果您需要更多或其他任何信息，请询问我。