2015-10-17 45 views
0
<input type="file" name="uploadPhotos[]" class="upload" multiple accept='image/*' /> 
<div class="previewBlock" id="sortable"></div> 

排序上傳圖片我建立與JS與jQuery UI排序並保存到數據庫

function handleFileSelect(evt) { 
    var files = evt.target.files; 
    for (var i = 0, f; f = files[i]; i++) { 
     if (!f.type.match('image.*')) { 
      continue; 
     } 
     var reader = new FileReader(); 
     reader.onload = (function (theFile) { 
      return function (e) { 
       $('.previewBlock').append(
        $('<div/>').append(
         $('<div/>').append(
          $('<img/>').attr({ 
           name: theFile.name, 
           src: e.target.result, 
           title: escape(theFile.name) 
          }).append(escape(theFile.name)) 
         ) 
        ) 
       ); 
      }; 
     })(f); 
     reader.readAsDataURL(f); 
    } 
} 
$('.upload').change(handleFileSelect); 

我用$ _FILES工作,並默認排序影像保存到DB預覽上傳圖片。 如何發送重新排序的數組與上傳圖片到PHP後,jQuery UI排序?

$("#sortable").sortable({ 
     start: function(event, ui) { }, 
     change: function(event, ui) { }, 
     update: function(event, ui) { 
      // 
     } 
$('#sortable').disableSelection(); 

回答

0

您可以通過AJAX請求處理此問題。

update: function(event, ui) { 

    var images = "array of ids or something" 

    $.ajax({ 
     url: '/path/to/php/file', 
     type: 'POST', 
     data: images, 
     success: function(response) { 
      console.log(response); 
     } 
    }); 

} 

在PHP方面,您只需要一些東西來處理請求並返回響應。

+0

感謝您的回覆。 如果我想發送圖像,並且他們在一篇文章中使用其他表單域進行排序,我可以不使用臨時表(或其他)並將排序操作保存在客戶端上嗎? –