AJAX,HTML5图像预览器+上传前删除

时间:2014-08-31 05:14:02

标签: javascript php jquery ajax html5

我有一个图像预览工作和上传。我的问题是如何才能使代码只上传预览区域中的任何内容?即。如果我选择图像并将其删除,则不应在提交时上传图像。

我让它与jquery一起使用假的“上传”只是为了说明我所追求的但不确定如何只将预览区域中的图像发送给PHP。

如果我能以某种方式将这个动态的预览区域图像列表放到一个数组中,我就可以轻松地使用PHP上传它们,难以获得该列表!

以下是演示:http://jsfiddle.net/WCCM7/3/

var $fileUpload = $("#files"),
    $list = $('#list'),
    thumbsArray = [],
    maxUpload = 5;

// READ FILE + CREATE IMAGE
function read( f ) {
  return function( e ) {
    var base64 =  e.target.result;
    var $img = $('<img/>', {
      src: base64,
      title: encodeURIComponent(f.name), //( escape() is deprecated! )
      "class": "thumb"
    });
    var $thumbParent = $("<span/>",{html:$img, "class":"thumbParent"}).append('<span class="remove_thumb"/>');
    thumbsArray.push(base64); // Push base64 image into array or whatever.
    $list.append(  $thumbParent  );
  };
}

// HANDLE FILE/S UPLOAD
function handleFileSelect( e ) {
    e.preventDefault(); // Needed?
    var files = e.target.files;
    var len = files.length;
    if(len>maxUpload || thumbsArray.length >= maxUpload){
      return alert("Sorry you can upload only 5 images");
    }
    for (var i=0; i<len; i++) { 
        var f = files[i];
        if (!f.type.match('image.*')) continue; // Only images allowed      
        var reader = new FileReader();
        reader.onload = read(f); // Call read() function
        reader.readAsDataURL(f);
    }
} 

$fileUpload.change(function( e ) {
    handleFileSelect(e);
});

$list.on('click', '.remove_thumb', function () {
    var $removeBtns = $('.remove_thumb'); // Get all of them in collection
    var idx = $removeBtns.index(this );   // Exact Index-from-collection
    $(this).closest('span.thumbParent').remove(); // Remove tumbnail parent
    thumbsArray.splice(idx, 1); // Remove from array
}); 


// that's it. //////////////////////////////
// Let's test //////////////////////////////

$('#upload').click(function(){
  var testImages = "";
  for(var i=0; i<thumbsArray.length; i++){
    testImages += "<img src='"+thumbsArray[i]+"'>";
  }
  $('#server').empty().append(testImages);
});

我真正想要的是:

enter image description here

请帮帮我!我一直坚持这个问题一个月。

0 个答案:

没有答案