Question

我已经完成了PHP代码部分（图像上传到服务器端模块）我的问题是前端UI部分。到目前为止我得到了

<script type="text/javascript">
var abc = 0;     
$(document).ready(function() {
$('#add_more').click(function() {
    $(this).before($("<div/>", {
        id: 'filediv'
    }).fadeIn('slow').append($("<input/>", {
        name: 'file[]',
        type: 'file',
        id: 'file'
    }), $("<br/>")));
});

$('body').on('change', '#file', function() {
    if (this.files && this.files[0]) {
       abc += 1; // Incrementing 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=''/></div>");
       var reader = new FileReader();
       reader.onload = imageIsLoaded;
       reader.readAsDataURL(this.files[0]);
       $(this).hide();
       $("#abcd" + abc).append($("<img/>", {
        id: 'img',
        src: 'x.png',
        alt: 'delete'
       }).click(function() {
        $(this).parent().parent().remove();
       }));
    }
});

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();
    }
});

}）;

<form action=""  method="post" enctype="multipart/form-data">
<div id="filediv">
<input type="file" id="file" name="file[]" multiple /></div><br />
<input type="button" id="add_more" class="uploading" value="Add More Files"/>
<input type="submit" value="Upload File" name="upload" class="uploading"/>
</form>

如何使用用户刚刚添加/拖放的图片？如果可能，允许拖放多个图像而不是逐个执行。如果我问得太多，我很抱歉，我对jQuery / javascript并不擅长。

如何使图像适合？

0 个答案: