多文件上传以文件名作为标题

如何解决多文件上传以文件名作为标题

我使用 jquery-multifile v2.2.2 上传图库图片。我想取文件名，删除“_ - / etc.”符号并使用文件名作为图像的标题。

如何编辑值部分以获取文件名并根据需要进行编辑？

<input placeholder="caption" type="text" value"???" name="caption[]" id="'+element.id+'_caption'+'"></input>

• 我正在使用这个脚本来集成多文件 jquery :

   <script type="text/javascript">
        
        $(function(){ // wait for page to load
     
    
    
      $('#withEvents').MultiFile({
        max: 20,onFileRemove: function(element,value,master_element) {
          $('#F9-Log').append('<li>onFileRemove - ' + value + '</li>')
        },afterFileRemove: function(element,master_element) {
          $('#F9-Log').append('<li>afterFileRemove - ' + value + '</li>')
        },onFileAppend: function(element,master_element) {
    
          $('#F9-Log').append('<li>onFileAppend - ' + value + '</li>')
        },afterFileAppend: function(element,master_element) {
          $('#F9-Log').append('<li>afterFileAppend - ' + value + '</li>')
        },onFileSelect: function(element,master_element) {
          $('#F9-Log').append('<li>onFileSelect - ' + value + '</li>')
        },afterFileSelect: function(element,master_element) {
            console.log(element,master_element);
            console.log('id:'+element.id);
            
            var a = '<div class="as"><input placeholder="caption" type="text" name="caption[]" id="'+element.id+'_caption'+'"></input><input name="alttext[]" placeholder="Alt text" type="text" id="'+element.id+'_alttext'+'"></input></div>';
         
        $('.MultiFile-preview:last').after(a);   
        a='';
        }
    
      });
    
    
        </script>

解决方法

根据我的理解，您的意思是您只需将 element.id 替换为 element.name

afterFileSelect: function(element,value,master_element) {
      console.log(element,master_element);
      console.log('id:'+element.id);
 console.log('caption:'+element.name);


      var a = '<div class="as"><input placeholder="caption" type="text" name="caption[]" id="'+element.id+'_caption'+'"></input><input name="alttext[]" placeholder="Alt text" type="text" id="'+element.id+'_alttext'+'"></input></div>';

  $('.MultiFile-preview:last').after(a);   
  a='';
  }

,

我做到了。

'+file.name.replace(/\.[^/.]+$/,"")+'

 <script type="text/javascript">
    
    $(function(){ // wait for page to load
 


  $('#withEvents').MultiFile({
    max: 20,onFileRemove: function(element,master_element,file) {
      $('#F9-Log').append('<li>onFileRemove - ' + value + '</li>')
    },afterFileRemove: function(element,file) {
      $('#F9-Log').append('<li>afterFileRemove - ' + value + '</li>')
    },onFileAppend: function(element,file) {

   
      $('#F9-Log').append('<li>onFileAppend - ' + value + '</li>')
    },afterFileAppend: function(element,file) {
      $('#F9-Log').append('<li>afterFileAppend - ' + value + '</li>')
    },onFileSelect: function(element,file) {
      $('#F9-Log').append('<li>onFileSelect - ' + value + '</li>')
    },afterFileSelect: function(element,file) {
        console.log(element,master_element);
        console.log('id:'+element.id);
        console.log('caption:'+file.name);
    
        var a = '<div class="as"><input placeholder="caption" type="text" value="'+file.name.replace(/\.[^/.]+$/,"")+'" name="caption[]" id="'+element.id+'_caption'+'"></input><input name="alttext1[]" placeholder="Alt text" type="text" id="'+element.id+'_alttext1'+'"></input></div>';
       
    $('.MultiFile-preview:last').after(a);   
    a='';
    }

  });
  
  

});

    </script>