Вопрос по jquery, html, javascript – Принудительно загружать файлы изображений в браузер

72

Мне нужен браузер для загрузки файлов изображений, как это происходит при нажатии на лист Excel.

Есть ли способ сделать это, используя только программирование на стороне клиента?


    
        
        
        $(document).ready(function () {
            $("*").click(function () {
                $("p").hide();
            });
        });
        
    

    
        document.onclick = function (e) {
            e = e || window.event;
            var element = e.target || e.srcElement;
            if (element.innerHTML == "Image") {
                //someFunction(element.href);
                var name = element.nameProp;
                var address = element.href;
                saveImageAs1(element.nameProp, element.href);
                return false; // Prevent default action and stop event propagation
            }
            else
                return true;
        };

        function saveImageAs1(name, adress) {
            if (confirm('you wanna save this image?')) {
                window.win = open(adress);
                //response.redirect("~/testpage.html");
                setTimeout('win.document.execCommand("SaveAs")', 100);
                setTimeout('win.close()', 500);
            }
        }
    

    
        
            
                <p>
                    <a href="http://localhost:55298/SaveImage/demo/Sample2.xlsx" target="_blank">Excel</a><br>
                    <a href="http://localhost:55298/SaveImage/demo/abc.jpg" id="abc">Image</a>
                </p>
            
        
    

Как это должно работать в случае загрузки листа Excel (что делают браузеры)?

Лучший способ обеспечить загрузку файлов - это установить расположение контента на стороне сервера, большинство решений на стороне клиента неэто так надежно. adeneo
Возможный дубликат:stackoverflow.com/questions/2408146/...? Karl-André Gagnon
Карл-Андре Ганьон: Пожалуйста, сделайте это правильно.пометил HTML 5 как я не хочу его использовать] и без касания сервера Amit
Есть похожий вопрос, на который вам уже ответили:stackoverflow.com/a/6799284/1948211 dschu
download приписывать. Šime Vidas

Ваш Ответ

11   ответов
4

Обновление весны 2018

<a href="/path/to/image..jpg">
</a>

Хотя это все еще поддерживается, по состоянию на февраль 2018 года Chrome отключил эту функцию для загрузки из разных источников, что означает, что она будет работать, только если файл находится на том же доменном имени.

Я нашел обходной путь для загрузки междоменных изображений после Chrome 'Новое обновление, которое отключило загрузку между доменами. Вы можете изменить это в функцию, чтобы удовлетворить ваши потребности. Вы могли бы получить изображение MIME-типа (JPEG, PNG, GIF и т. Д.) С некоторыми дополнительными исследованиями, если вам нужно. Там может быть способ сделать что-то подобное с видео, а также. Надеюсь, это поможет кому-то!

Leeroy & Ричард Парнаби-Кинг:

ОБНОВЛЕНИЕ: С весны 2018 года это больше невозможно для перекрестных ссылок. Поэтому, если вы хотите создать домен, отличный от imgur.com, он не будет работать так, как задумано.Объявление об устаревании и удалении Chrome

var image = new Image();
image.crossOrigin = "anonymous";
image.src = "https://is3-ssl.mzstatic.com/image/thumb/Music62/v4/4b/f6/a2/4bf6a267-5a59-be4f-6947-d803849c6a7d/source/200x200bb.jpg";
// get file name - you might need to modify this if your image url doesn't contain a file extension otherwise you can set the file name manually
var fileName = image.src.split(/(\\|\/)/g).pop();
image.onload = function () {
    var canvas = document.createElement('canvas');
    canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
    canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size
    canvas.getContext('2d').drawImage(this, 0, 0);
    var blob;
    // ... get as Data URI
    if (image.src.indexOf(".jpg") > -1) {
    blob = canvas.toDataURL("image/jpeg");
    } else if (image.src.indexOf(".png") > -1) {
    blob = canvas.toDataURL("image/png");
    } else if (image.src.indexOf(".gif") > -1) {
    blob = canvas.toDataURL("image/gif");
    } else {
    blob = canvas.toDataURL("image/png");
    }
    $("body").html("<b>Click image to download.</b><br><a download="" + fileName + "" href="" + blob + ""><img src="" + blob + ""></a>");
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

0

якорный тег без особого кода.

Скопируйте фрагмент и вставьте его в текстовый редактор и попробуйте ...!





   <div>
     <img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/SMirC-thumbsup.svg" width="200" height="200">
      <a href="#" download="https://upload.wikimedia.org/wikipedia/commons/1/1f/SMirC-thumbsup.svg"> Download Image </a>
   </div>

пожалуйста, добавьте больше деталей, например, где этот код может быть использован. Maciej S.
5

что расширение файла должно соответствовать вашей кодировке. И, конечно, этот параметр содержимого функции downlowadImage должен быть строкой вашего изображения в кодировке base64.

const clearUrl = url => url.replace(/^data:image\/\w+;base64,/, '');

const downloadImage = (name, content, type) => {
  var link = document.createElement('a');
  link.style = 'position: fixed; left -10000px;';
  link.href = `data:application/octet-stream;base64,${encodeURIComponent(content)}`;
  link.download = /\.\w+/.test(name) ? name : `${name}.${type}`;

  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

['png', 'jpg', 'gif'].forEach(type => {
  var download = document.querySelector(`#${type}`);
  download.addEventListener('click', function() {
    var img = document.querySelector('#img');

    downloadImage('myImage', clearUrl(img.src), type);
  });
});
a gif image: <img id="img" src="data:image/gif;base64,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">


<button id="png">Download PNG</button>
<button id="jpg">Download JPG</button>
<button id="gif">Download GIF</button>

link.href = 'данные: приложения / октет-поток» + encodeURIComponent (адрес) это повреждает файл и, следовательно, не может быть открыт, могу предложить, почему это так OM The Eternity
Пожалуйста, добавьте краткое объяснение к вашему ответу, чтобы сделать его релевантным для человека, который его спросил AGE
1

<a class="button" href="http://www.glamquotes.com/wp-content/uploads/2011/11/smile.jpg" download="smile.jpg">Download image</a>
-5

Download Image File

не работал для меня. Я'Я не уверен, почему.

Я обнаружил, что вы можете включить?download=true параметр в конце вашей ссылки для принудительной загрузки. Я думаю, что заметил эту технику, используемую Google Drive.

В вашу ссылку включите?download=true в конце вашего href.

Вы также можете использовать эту технику, чтобы установить имя файла одновременно.

В вашу ссылку включите?download=true&filename=My_Image_File.jpeg в конце вашего href.

? download = true передается в Google Drive, чтобы сообщить серверу, чтобы он отправил правильный заголовок для загрузки изображения. Это н'что-то, что будет работать в любой другой среде, если это не было специально настроено таким образом. muncherelli
16

ОБНОВЛЕНИЕ: С весны 2018 года это больше невозможно для перекрестных ссылок. Поэтому, если вы хотите создать домен, отличный от imgur.com, он не будет работать так, как задумано.Объявление об устаревании и удалении Chrome

function forceDownload(url, fileName){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "blob";
    xhr.onload = function(){
        var urlCreator = window.URL || window.webkitURL;
        var imageUrl = urlCreator.createObjectURL(this.response);
        var tag = document.createElement('a');
        tag.href = imageUrl;
        tag.download = fileName;
        document.body.appendChild(tag);
        tag.click();
        document.body.removeChild(tag);
    }
    xhr.send();
}
Это работает и для перекрестного происхождения. Santosh
изображение загружается, но не открывается, как указано 'Изображение сломано picacode
-16

<a href="path_to/image.jpg" alt="something">Download image</a>

И сам браузер автоматически загрузит изображение.

Если по какой-то причине это неt работа добавить атрибут загрузки. С помощью этого атрибута вы можете установить имя для загружаемого файла:

<a href="path_to/image.jpg" download="myImage">Download image</a>
Ссылка на изображение откроет изображение только в том же окне, если ваш браузер не настроен иначе.download атрибут неПоддерживается во всех браузерах. Design by Adrian
11
var pom = document.createElement('a');
pom.setAttribute('href', 'data:application/octet-stream,' + encodeURIComponent(text));
pom.setAttribute('download', filename);
pom.style.display = 'none';
document.body.appendChild(pom);
pom.click();
document.body.removeChild(pom);     
браузер сафари неатрибут поддержки загрузки t Pranav Labhe
Хорошее решение Sadi
140
Можно'Я контролирую, где этот файл должен быть загружен? Это просто загружает, чтобы загрузить папку непосредственно. Я хочу, чтобы он использовал локальный путь файла HTML. Arjun Chiddarwar
Спасибо за внимание к материалам о происхождении. Знаете ли вы, будут ли другие браузеры делать то же самое? Тьфу .. Я ненавижу кросс-происхождение. Jeremy S.
@ArjunChiddarwar Нет, это открывает уязвимости безопасности (представьте, что кто-то сохраняет вредоносный файл прямо в вашу папку Windows). Путь загрузки зависит от настроек браузера - например, по умолчанию Chrome будет загружать в вашу папку загрузок. Richard Parnaby-King
Спасибо за решение HTML5. Как еще учестьсохранить как' что даваймне ввести имя файла перед сохранением? teleman
-1



function prepHref(linkElement) {
    var myDiv = document.getElementById('Div_contain_image');
    var myImage = myDiv.children[0];
    linkElement.href = myImage.src;
}



<img src="YourImage.jpg" alt="MyImage">
<a href="#" onclick="prepHref(this)" download="">Click here to download image</a>


74

добавив ссылку на документ.

var link = document.createElement('a');
link.href = 'images.jpg';
link.download = 'Download.jpg';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
Отличное решение, спасибо! Обратите внимание, что если вы опуститеdocument.body.appendChild(link) это победилоработать в Firefox. Это'Также хорошо удалить созданный элемент сdocument.body.removeChild(link); послеlink.click() akn
лучшее решение. Чтобы избежать мусора в использовании DOMsetTimeout( function () { link.parentNode.removeChild( link ); },10 ); Mephiztopheles
Это решение работает и для видео. Я проверил это в Firefox и Chrome. Firefox решает воспроизвести видео при загрузке и сохраняет его в каталоге / tmp (в Linux - там, где оно было протестировано), а не в ""Загрузки» каталог. Хром не было проблем. VectorVortec
Спасибо долженЯ был выбран ответ, так как вопрос задал, как это сделать в JAVASCRIPT. codehelp4

Похожие вопросы