Substituir type file por variável com url definido

[Giihh 6]

Olá,

HTML:

<a onclick="call_menu(FILE, 'file_open');" href="#">Escolher arquivo...</a>

Javascript:

   //open
    this.file_open = function () {
        this.open();
    };


this.open = function () {
    document.getElementById("tmp").innerHTML = '';
    var a = document.createElement('input');
    a.setAttribute("id", "file_open");
    a.type = 'file';
    a.multiple = 'multiple ';
    document.getElementById("tmp").appendChild(a);
    document.getElementById('file_open').addEventListener('change', this.open_handler, false);


    //force click
    document.querySelector('#file_open').click();
};

No html ao clicar em escolher arquivo executa o trecho acima do javascript.

Mas agora preciso que seja diferente, tirar a opção escolher arquivo que é o que o código acima faz e ao invés disso ter uma variável que recebera um arquivo (url) definido/fixo.

Acontece que ´this.open_handler´ é a função abaixo:

 

this.open_handler = function (e) {
    var files = e.target.files;
    for (var i = 0, f; i < files.length; i++) {
        f = files[i];
        if (!f.type.match('image.*') && f.type != 'text/xml')
            continue;
        if (files.length == 1)
            this.SAVE_NAME = f.name.split('.')[f.name.split('.').length - 2];


        var FR = new FileReader();
        FR.file = e.target.files[i];


        FR.onload = function (event) {
            if (this.file.type != 'text/xml') {
                //image
                LAYER.layer_add(this.file.name, event.target.result, this.file.type);
                EXIF.getData(this.file, this.save_EXIF);
            }
            else {
                //xml
                var responce = FILE.load_xml(event.target.result);
                if (responce === true)
                    return false;
            }
        };
        if (f.type == "text/plain")
            FR.readAsText(f);
        else if (f.type == "text/xml")
            FR.readAsText(f);
        else
            FR.readAsDataURL(f);
    }};

Meu objetivo é apenas eliminar no front end o botão acima para escolher arquivo. e criar uma varivel com valor fixo (contendo a url do arquivo)

 

Sou iniciante com javascript

Agradeço ajuda

[FreitasMT 29]

Aí vai depender muito.

 

• que tipos de arquivo você vai ler dessas URLs?
• você vai colocar a url do arquivo local ou vai ser um link remoto?
• Qual o objetivo final pra usar esse arquivo? Só pra fazer preview, pra subir pro servidor.....

 

Se for pra arquivo remoto, você tem limitações, só vai conseguir ler dados de coisas que sejam do seu host dependendo do tipo

 

Se for para arquivo local no final das contas você vai ter que ter um input file oculto e um input ou div bonitinha interagindo com o cliente, o que não é tão simples

[Giihh 6]

Obrigada por responder @Mageddo,

 

Atualmente o botão abre quantas imagens forem selecionadas. Então ao clicar nele abre a janela de arquivos do Sistema operacional e podem ser escolhidas quantas imagens forem necessárias.

 

não preciso mais disso, quero trocar o processo acima por isso:

var urlImagemDefinida = "minha-imagem.png";

Ou seja apenas uma unica imagem. E que esta definida na variavel "urlImagemDefinida"

 

E claro irei eliminar o botão "escolher arquivo"

[FreitasMT 29]

ahh ta, mas só pra mostrar na tela? por que aí é só fazer

<img src="minha-imagem.png" />

e já era, nem de javascript precisa

[Giihh 6]

Veja bem a imagem selecionada faz parte do processo da aplicação javascript. ao selecionar a imagem essa parte do javascript e executada

//open
    this.file_open = function () {
        this.open();
    };


this.open = function () {
    document.getElementById("tmp").innerHTML = '';
    var a = document.createElement('input');
    a.setAttribute("id", "file_open");
    a.type = 'file';
    a.multiple = 'multiple ';
    document.getElementById("tmp").appendChild(a);
    document.getElementById('file_open').addEventListener('change', this.open_handler, false);


    //force click
    document.querySelector('#file_open').click();
};

veja que no trecho acima tem "this.open_handler" que é a função abaixo:

this.open_handler = function (e) {
    var files = e.target.files;
    for (var i = 0, f; i < files.length; i++) {
        f = files[i];
        if (!f.type.match('image.*') && f.type != 'text/xml')
            continue;
        if (files.length == 1)
            this.SAVE_NAME = f.name.split('.')[f.name.split('.').length - 2];


        var FR = new FileReader();
        FR.file = e.target.files[i];


        FR.onload = function (event) {
            if (this.file.type != 'text/xml') {
                //image
                LAYER.layer_add(this.file.name, event.target.result, this.file.type);
                EXIF.getData(this.file, this.save_EXIF);
            }
            else {
                //xml
                var responce = FILE.load_xml(event.target.result);
                if (responce === true)
                    return false;
            }
        };
        if (f.type == "text/plain")
            FR.readAsText(f);
        else if (f.type == "text/xml")
            FR.readAsText(f);
        else
            FR.readAsDataURL(f);
    }};

Pensei o seguinte:

 

Excluo as duas funções this.open e this.file_open, depois na função this.open_handler, tirar o loop for , até aqui entendi em partes, mas não sei como tirar corretamente o loop e inserir a variavel com a url fixa