2016-04-03 15 views
1

Im'i kullanarak jquery.filer https://github.com/CreativeDream/jQuery.filer dosya yükleme için bölüm içinde sakladım kaydedilmiş resimleri almak için file: var document.ready fonksiyonunu yükleyebilmek için bu dosyaya yükleyebiliyorum i can manual: SORUN i içeride işlevini yapmaya çalıştıkjquery.filer Düzenle modu dinamik dosya ekleniyor

files: [ 
      { 
      name: image1, 
      size: 5453, 
      type: "image/jpg", 
      file: "uploads/"+image1 
     }, 
      { 
      name: image2, 
      size: 5453, 
      type: "image/jpg", 
      file: "uploads/"+image2 
     }, 
     { 
      name: image3, 
      size: 5453, 
      type: "image/jpg", 
      file: "uploads/"+image3 
     }, 
     { 
      name: image4, 
      size: 5453, 
      type: "image/jpg", 
      file: "uploads/"+image4 
     }, 
     { 
      name: image5, 
      size: 5453, 
      type: "image/jpg", 
      file: "uploads/"+image5 
     } 
    ], 

döngü tarafından dinamik olarak ekliyor. ama bu da çalışmıyor

files:function(){ 

      var returnedObject = [{ 
      name: image1, 
      size: 5453, 
      type: "image/jpg", 
      file: "uploads/"+image1 
      }]; 



      return returnedObject; 
     } 

Tam kodu:

$(document).ready(function() { 

    var image1 = document.getElementById('image1').value; 
    var image2 = document.getElementById('image2').value; 
    var image3 = document.getElementById('image3').value; 
    var image4 = document.getElementById('image4').value; 
    var image5 = document.getElementById('image5').value; 
    var image6 = document.getElementById('image6').value; 
    var image7 = document.getElementById('image7').value; 
    var image8 = document.getElementById('image8').value; 
    var image9 = document.getElementById('image9').value; 
    var image10 = document.getElementById('image10').value; 

     //Example 2 
     $("#filer_input2").filer({ 
      limit: 10, 
      maxSize: 2, 
      extensions: ['jpg', 'jpeg', 'png', 'gif'], 
      changeInput: '<div class="jFiler-input-dragDrop"><div class="jFiler-input-inner"><div class="jFiler-input-icon"><i class="icon-jfi-cloud-up-o"></i></div><div class="jFiler-input-text"><h3>Drag&Drop files here</h3> <span style="display:inline-block; margin: 15px 0">or</span></div><a class="jFiler-input-choose-btn blue">Browse Files</a></div></div>', 
      showThumbs: true, 
      theme: "dragdropbox", 
      templates: { 
       box: '<ul class="jFiler-items-list jFiler-items-grid"></ul>', 
       item: '<li class="jFiler-item">\ 
          <div class="jFiler-item-container">\ 
           <div class="jFiler-item-inner">\ 
            <div class="jFiler-item-thumb">\ 
             <div class="jFiler-item-status"></div>\ 
             <div class="jFiler-item-info">\ 
              <span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\ 
              <span class="jFiler-item-others">{{fi-size2}}</span>\ 
             </div>\ 
             {{fi-image}}\ 
            </div>\ 
            <div class="jFiler-item-assets jFiler-row">\ 
             <ul class="list-inline pull-left">\ 
              <li>{{fi-progressBar}}</li>\ 
             </ul>\ 
             <ul class="list-inline pull-right">\ 
              <li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\ 
             </ul>\ 
            </div>\ 
           </div>\ 
          </div>\ 
         </li>', 
       itemAppend: '<li class="jFiler-item">\ 
           <div class="jFiler-item-container">\ 
            <div class="jFiler-item-inner">\ 
             <div class="jFiler-item-thumb">\ 
              <div class="jFiler-item-status"></div>\ 
              <div class="jFiler-item-info">\ 
               <input type=\"hidden\" name=\"images[]\" value="{{fi-name}}"\">\n\ 
               <span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\ 
               <span class="jFiler-item-others">{{fi-size2}}</span>\ 
              </div>\ 
              {{fi-image}}\ 
             </div>\ 
             <div class="jFiler-item-assets jFiler-row">\ 
              <ul class="list-inline pull-left">\ 
               <li><span class="jFiler-item-others">{{fi-icon}}</span></li>\ 
              </ul>\ 
              <ul class="list-inline pull-right">\ 
               <li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\ 
              </ul>\ 
             </div>\ 
            </div>\ 
           </div>\ 
          </li>', 
       progressBar: '<div class="bar"></div>', 
       itemAppendToEnd: false, 
       removeConfirmation: true, 
       _selectors: { 
        list: '.jFiler-items-list', 
        item: '.jFiler-item', 
        progressBar: '.bar', 
        remove: '.jFiler-item-trash-action' 
       } 
      }, 
      dragDrop: { 
       dragEnter: null, 
       dragLeave: null, 
       drop: null, 
      }, 
      uploadFile: { 
       url: "./php/upload.php", 
       data: null, 
       type: 'POST', 
       enctype: 'multipart/form-data', 
       beforeSend: function() { 
       }, 
       success: function (data, itemEl, listEl, boxEl, newInputEl, inputEl, id) { 
        var new_file_name = JSON.parse(data), 
          filerKit = inputEl.prop("jFiler"); 

        filerKit.files_list[id].name = new_file_name; 
        //filerKit.files_list[id].file.name = new_file_name; <-- false 

        var parent = itemEl.find(".jFiler-jProgressBar").parent(); 
        itemEl.find(".jFiler-jProgressBar").fadeOut("slow", function() { 
         $(" <input type=\"hidden\" name=\"images[]\" value=\"" + new_file_name + "\"> <div class=\"jFiler-item-others text-success\"><i class=\"icon-jfi-check-circle\"></i> Success</div>").hide().appendTo(parent).fadeIn("slow"); 
        }); 

       }, 
       error: function (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: null, 
       onProgress: null, 
       onComplete: null 
      }, 
      files:function(){ 

       var returnedObject = [{ 
       name: image1, 
       size: 5453, 
       type: "image/jpg", 
       file: "uploads/"+image1 
       }]; 



       return returnedObject; 
      } 


        , 
      addMore: false, 
      clipBoardPaste: true, 
      excludeName: 'jfiler-items-exclude-AA-1', 
      beforeRender: null, 
      afterRender: null, 
      beforeShow: null, 
      beforeSelect: null, 
      onSelect: null, 
      afterShow: null, 
      onRemove: function (itemEl, file, id, listEl, boxEl, newInputEl, inputEl) { 
       var filerKit = inputEl.prop("jFiler"), 
         file_name = filerKit.files_list[id].name; 

       $.post('./php/remove_file.php', {file: file_name}); 
      }, 
      onEmpty: null, 
      options: null, 
      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." 
       } 
      } 
     }); 

    }); 

cevap

1

ben yöntemi gibidir

files: img() 

kullanarak yerine bu

files: [ 
      { 
      name: image1, 
      size: 5453, 
      type: "image/jpg", 
      file: "uploads/"+image1 
     }] 

im

cevap zakis Mohamed ile yardımı ile bu sorunu çözmek için böyle bir şey yaptığını gelmiş bu:

function img() { 
     var images = []; 
     var inp = []; 

     var image1 = document.getElementById('image1').value; 
     var image2 = document.getElementById('image2').value; 
     var image3 = document.getElementById('image3').value; 
     var image4 = document.getElementById('image4').value; 
     var image5 = document.getElementById('image5').value; 
     var image6 = document.getElementById('image6').value; 
     var image7 = document.getElementById('image7').value; 
     var image8 = document.getElementById('image8').value; 
     var image9 = document.getElementById('image9').value; 
     var image10 = document.getElementById('image10').value; 



     if (image10 != '') { 
      inp.push(image10); 
     } 

     if (image9 != '') { 
      inp.push(image9); 
     } 

     if (image8 != '') { 
      inp.push(image8); 
     } 

     if (image7 != '') { 
      inp.push(image7); 
     } 

     if (image6 != '') { 
      inp.push(image6); 
     } 

     if (image5 != '') { 
      inp.push(image5); 
     } 

     if (image4 != '') { 
      inp.push(image4); 
     } 

     if (image3 != '') { 
      inp.push(image3); 
     } 

     if (image2 != '') { 
      inp.push(image2); 
     } 

     if (image1 != '') { 
      inp.push(image1); 
     } 

     $.each(inp, function (key, value) { 
      inp = '{"name": "' + value + '","size": 5453,"type": "image/jpg","file": "uploads/' + value + '"}'; 
      imag = $.parseJSON(inp); 
      images.push(imag); 
     }); 

     return images; 
    } 
0

Bu Yardıma umut cevabı.

<script> 
function img(){ 
var images =[]; 
var inp = $("#imagesOfAd").val(); 
inp = inp.split(','); 
var url= '<?php echo site_url(); ?>'; 
$.each(inp, function(key, value) { 
    inp='{"name": "'+value+'","size": 5453,"type": "image/jpg","file": "'+url+'uploads/'+value+'"}'; 
    imag = $.parseJSON(inp); 
    images.push(imag); 
}); 
$.each(images, function(key, value) { 
    images.push(value);  
}); 
return images; 
} 
$(document).ready(function() {  
$('#filer_input2').filer({ 
    limit: null, 
    maxSize: null, 
    extensions: null, 
    changeInput: '<div class="jFiler-input-dragDrop"><div class="jFiler-input-inner"><div class="jFiler-input-icon"><i class="icon-jfi-cloud-up-o"></i></div><div class="jFiler-input-text"><h3>Drag&Drop files here</h3> <span style="display:inline-block; margin: 15px 0">or</span></div><a class="jFiler-input-choose-btn blue">Browse Files</a></div></div>', 
    showThumbs: true, 
    theme: "dragdropbox", 
    templates: { 
     box: '<ul class="jFiler-items-list jFiler-items-grid"></ul>', 
     item: '<li class="jFiler-item">\ 
        <div class="jFiler-item-container">\ 
         <div class="jFiler-item-inner">\ 
          <div class="jFiler-item-thumb">\ 
           <div class="jFiler-item-status"></div>\ 
           <div class="jFiler-item-info">\ 
            <span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\ 
            <span class="jFiler-item-others">{{fi-size2}}</span>\ 
           </div>\ 
           {{fi-image}}\ 
          </div>\ 
          <div class="jFiler-item-assets jFiler-row">\ 
           <ul class="list-inline pull-left"></ul>\ 
           <ul class="list-inline pull-right">\ 
            <li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\ 
           </ul>\ 
          </div>\ 
         </div>\ 
        </div>\ 
       </li>', 
     itemAppend: '<li class="jFiler-item">\ 
         <div class="jFiler-item-container">\ 
          <div class="jFiler-item-inner">\ 
           <div class="jFiler-item-thumb">\ 
            <div class="jFiler-item-status"></div>\ 
            <div class="jFiler-item-info">\ 
             <span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\ 
             <span class="jFiler-item-others">{{fi-size2}}</span>\ 
            </div>\ 
            {{fi-image}}\ 
           </div>\ 
           <div class="jFiler-item-assets jFiler-row">\ 
            <ul class="list-inline pull-left">\ 
             <li><span class="jFiler-item-others">{{fi-icon}}</span></li>\ 
            </ul>\ 
            <ul class="list-inline pull-right">\ 
             <li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\ 
            </ul>\ 
           </div>\ 
          </div>\ 
         </div>\ 
        </li>', 
     itemAppendToEnd: false, 
     removeConfirmation: true, 
     _selectors: { 
      list: '.jFiler-items-list', 
      item: '.jFiler-item', 
      remove: '.jFiler-item-trash-action' 
     } 
    }, 
    addMore: true, 
    files: img() 
}); 
}); 
</script> 
+0

Bu sorun değil ama sorunum var php'de 10 gizli değer var. Bu img yöntemine nasıl ulaşabilirim o 10 resim değerleri – user1750832

+0

var inp = $ ("# imagesOfAd"). Val(); Burada sadece bir değer alıyorsunuz değil mi? – user1750832

+0

Geç kaldığım için üzgünüz, içinde tüm resim isimlerine sahip gizli bir giriş ("# imagesOfAd") var. –