File type input with split() function returns with comma

Asked

Viewed 110 times

1

I am recovering the returned file from a input of the kind file of a form and he returns C:\\fakepath\\nomedoarquivo.extensão so far so good, then I applied a split() and he returns the following: ,nomedoarquivo.extensão why this happens and how to solve?
Print of the incident:
inserir a descrição da imagem aqui


Code of my JSP: 

<%@page contentType="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

1 answer

2


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

To correct this, simply inform the index before setting the 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>

<input type="file" />
<br /><br />
<input type="text" />

An alternative is to use the property files of input:file. With this property, you can access other file attributes such as 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 defined according to the file extension.

Browser other questions tagged javascript html jquery css jsp

You are not signed in. Login or sign up in order to post.