我的完整代码是here.

这是代码的一部分：

$(document).ready(function() {

  var imageCounter = 0;

  $('#articleForm').submit(function() {
    uploadPosition();
  });

  function uploadPosition() {
    var uploadedImagesPositions = [];
    $.each($('.jFiler-item-thumb-image'),function( index,value ) {
      $(this).attr('data-position-index',index);
      uploadedImagesPositions[index] = $(this).find('img').attr('src');
    });

    if (! $('input[name="uploadedItems"]').length) {
      $('<input>',{
        type: "hidden",name: "uploadedItems"
      }).appendTo('#articleForm')
    }
    $('input[name="uploadedItems"]').val(JSON.stringify(uploadedImagesPositions));
    $("input[name^='jfiler-items-exclude-']:hidden").detach();
    console.log(uploadedImagesPositions);
  }

   $('#upload').filer({
            limit: null,maxSize: null,extensions: null,changeInput: '<div class="jFiler-input-dragDrop"><h1>+</h1></div>',showThumbs: true,appendTo: '.uploaded_items',theme: "default",templates: {
                Box: '<div class="jFiler-item-list"></div>',item: '<div class="jFiler-item img-container dragdiv"></div>',itemAppend: '<div class="jFiler-item img-container dragdiv"></div>',progressBar: '<div class="bar"></div>',itemAppendToEnd: false,removeConfirmation: false,_selectors: {
                    list: '.jFiler-item-list',item: '.jFiler-item',progressBar: '.bar',remove: '.jFiler-item-trash-action',}
            },uploadFile: {
                url: "/admin/articles/ajax",data: {'_token' : $('input[name="_token"]').val()},type: 'POST',enctype: 'multipart/form-data',beforeSend: function(){},success: function(data,el){
                    uploadedImagesPositions = [];
console.log(data);
                     var filenameArray = data.split('/');
                     var name = filenameArray.slice(-1).pop();
                     var filename = name.replace(/[\/\s()]/g,'');

                     var imageContainer = $('[data-jfiler-index="' + imageCounter + '"]').first();

                     $('<div class="jFiler-item-thumb-image"><img src="/imagecache/thumb/' + filename + '"></div><div class="overlay"><a href="#"><span><i class="jFiler-item-trash-action ion-trash-a"></span></a></div>').appendTo(imageContainer);
                      imageCounter++;

                      $(".dragdiv").each(function(){
                            makeElementAsDragAndDrop($(this));
                        });

                        $('.images-refresh').hide();
                        $('.images-refresh').click(function(){
                            $(this).closest("form").submit()
                        });

                        function makeElementAsDragAndDrop(elem) {
                            $(elem).draggable({
                                revert: "invalid",cursor: "move",helper: "clone"
                            });
                            $(elem).droppable({
                                activeClass: "ui-state-hover",hoverClass: "ui-state-active",drop: function(event,ui) {
                                    uploadedImagesPositions = [];
                                    $('.images-form a').hide();
                                    $('.images-refresh').show();
                                    var $dragElem = $(ui.draggable).clone().replaceAll(this);
                                    $(this).replaceAll(ui.draggable);
                                    makeElementAsDragAndDrop(this);
                                    makeElementAsDragAndDrop($dragElem);
                                }
                            });
                        }

                    var parent = el.find(".jFiler-jProgressBar").parent();
                    el.find(".jFiler-jProgressBar").fadeOut("slow",function(){
                        $("<div class=\"jFiler-item-others text-success\"><i class=\"icon-jfi-check-circle\"></i> Success</div>").hide().appendTo(parent).fadeIn("slow");
                    });
                },error: function(el){
                    console.log(el);
                    var parent = el.find(".jFiler-jProgressBar").parent();
                    el.find(".jFiler-jProgressBar").fadeOut("slow",function(){
                        $("<div class=\"jFiler-item-others text-error\"><i class=\"icon-jfi-minus-circle\"></i> Error</div>").hide().appendTo(parent).fadeIn("slow");
                    });
                },statusCode: {},onProgress: function(){},},dragDrop: {
                dragEnter: function(){},dragLeave: function(){},drop: function(){},addMore: true,clipBoardPaste: true,excludeName: null,beforeShow: function(){return true},onSelect: function(){},afterShow: function(){},onRemove: function(el){
                imageCounter = $('.img-container').size() -1;
                //uploadPosition();
                //console.log(el.find('img').attr('src'));
            },onEmpty: function(){
                imageCounter = 0;
            },captions: {
                button: "Choose Files",Feedback: "Choose files To Upload",Feedback2: "files were chosen",drop: "Drop file here to Upload",removeConfirmation: "Are you sure you want to remove this file?",errors: {
                    filesLimit: "Only {{fi-limit}} files are allowed to be uploaded.",filesType: "Only Images are allowed to be uploaded.",filesSize: "{{fi-name}} is too large! Please upload file up to {{fi-maxSize}} MB.",filesSizeAll: "Files you've choosed are too large! Please upload files up to {{fi-maxSize}} MB."
                }
            }
        });
});

更新

我已经更新了fiddle与html和css以及JavaScript代码,不幸的是我无法让它工作,所以不知道这是多么有用,但至少你可以看到完整的代码.
我在我上传图片的页面上使用这个脚本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script type="text/javascript" src="{{ asset('js/foundation/foundation.min.js') }}"></script>
<script>$(document).foundation();</script>
<script type="text/javascript" src="{{ asset('js/jquery-ui/jquery-ui.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-filer/jquery-filer.js') }}"></script>

jquery-filer是我用于上传的脚本,我用的是脚本.

这是我的服务端功能,用于ajax上传.我在后台使用PHP laravel：

public function ajaxUpload() {

        if (Input::hasFile('file')) {
            $files = Input::file('file');

            foreach ($files as $file) {
                $time = microtime(true);
                $name = $file->getClientOriginalName();
                $filename = $time.'-'.preg_replace('/[(\)\s]/u','',$name);

                if(substr($file->getMimeType(),5) == 'image') {

                    try {
                        $original = Image::make($file)->save(public_path($this->destinationPath.'/'.$filename));
                        \Log::info('try: '.$filename."\n");

                    } catch (Exception $e) {
                        \Log::info('Caught exception: '.$e->getMessage(). "\n");
                    }

                    $img = Image::cache(function($image) use ($original){
                        return $image->make($original);
                    });
                }
            }
        }

        return $this->destinationPath.$filename;
    }