Input of file type with split () function returns with comma

Question

Input of file type with split () function returns with comma

Navigation

#1 by (1 votes)

1

I'm retrieving the file returned from a input of type file of a form and it returns C:\fakepath\nomedoarquivo.extensão so far so good, hence I applied a split() and it returns the following: ,nomedoarquivo.extensão per what happens and how do I solve it?
Print what happened:

CodeofmyJSP:

<%@pagecontentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>""</title>
        <style>
            .arquivo {
                display: none;
            }
            .file {
                line-height: 30px;
                height: 30px;
                border: 1px solid #A7A7A7;
                padding: 5px;
                box-sizing: border-box;
                font-size: 15px;
                vertical-align: middle;
                width: 237px;
            }
            .btn1 {
                cursor: pointer;
                border: none;
                box-sizing: border-box;
                padding: 2px 10px;
                background-color: #4493c7;
                color: #FFF;
                height: 32px;
                font-size: 15px;
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <div id="modal_file" class="modal-3" onclick="enableDrag(this);">
            <!-- tarja -->
            <div class="tarja"></div>
            <!-- header -->
            <div class="modal-header">
                <!-- icone -->
                <div class="icon-modal-3">
                    <img src="Pictures/todosIcons.png" alt="search_icon">
                </div>
                <!-- titulo -->
                <div class="title-modal title-blue">
                    <h2>Select a File</h2>
                </div>
                <!-- botao de fechar -->
                <div class="close-button cl-bt-blue" onclick="$('#modal_file').css('display', 'none');">
                    <p>X</p>
                </div>
            </div>

            <h2>Selecione um arquivo para upload:</h2>
            <form>
                <input type="file" name="arquivo" id="arquivo" class="arquivo">
                <input type="text" name="file" id="file" class="file" placeholder="Arquivo" readonly="readonly">
                <input type="button" class="btn1" value="SELECIONAR">
            </form>   

        </div>
        <script src="JS/FormRedirect.js" ></script>  
        <script type="text/javascript" src="jquery/jquery-3.3.1.js"></script>
        <script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
        <script src="JS/dragAndDrop.js"></script>
        <script type="text/javascript" src="jquery/jquery-ui.js"></script>
        <script>
                    $('.btn1').on('click', function () {
                        $('.arquivo').trigger('click');
                    });
                    $(function () {
                        $('.arquivo').on('change', function () {
                            var numArquivos = $(this).get(0).files.length;
                            if (numArquivos > 1) {
                                $('#file').val(numArquivos + ' arquivos selecionados');
                            } else {
                                $('#file').val($(this).val().split('C:\fakepath\'));
                            }
                        });
                    });
        </script>
    </body>
</html>

javascript html jquery css jsp

asked by anonymous 20.12.2018 / 14:58

1 answer

Get parameter passed by POST with $ .ajax [duplicate] How to use \ t (tab) on outputs with EOF?

score 1 · Accepted Answer

This happens because String.split will return an array . In this case, jQuery will use the Array.implode function before adding the value in input (since it only accepts string ).

To fix this, simply enter the index before setting value

Example:

const file = $("[type='file']"),
      text = $("[type='text']")
      
$(file).on("change", function() {
  $(text).val( $(this).val().split('C:\fakepath\')[1] ); // Utiliza o índice "1"
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><inputtype="file" />
<br /><br />
<input type="text" />

An alternative is to use the files property of input: file . With this property, you can access other attributes of the file, for example: mimetype¹, size, name, modification date etc.

Example:

const file = document.querySelector("[type='file']"),
      name = document.querySelector("#name"),
      type = document.querySelector("#type"),
      size = document.querySelector("#size")

file.addEventListener("input", () => {
  
  //Acessa a propriedade "files" > Captura o primeiro valor do array
  let data = file.files[0]
  
  name.textContent = data.name
  type.textContent = data.type
  size.textContent = '${Math.round(data.size/10000)} MB'
})

<input type="file" />
<br /><br />
Name: <span id="name"></span><br>
Type: <span id="type"></span><br>
Size: <span id="size"></span>

¹: The value of mimetype is set according to the file extension.