Принудительно загружать файлы изображений в браузер

Мне нужен браузер для загрузки файлов изображений, как это происходит при нажатии на лист 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 (что делают браузеры)?

 Šime Vidas08 июл. 2013 г., 15:20
download приписывать.
 Karl-André Gagnon08 июл. 2013 г., 15:24
Возможный дубликат:stackoverflow.com/questions/2408146/...?
 adeneo08 июл. 2013 г., 15:23
Лучший способ обеспечить загрузку файлов - это установить расположение контента на стороне сервера, большинство решений на стороне клиента неэто так надежно.
 Amit11 июл. 2013 г., 12:29
Карл-Андре Ганьон: Пожалуйста, сделайте это правильно.пометил HTML 5 как я не хочу его использовать] и без касания сервера
 dschu08 июл. 2013 г., 15:25
Есть похожий вопрос, на который вам уже ответили:stackoverflow.com/a/6799284/1948211

Ответы на вопрос(11)

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

<a href="https://stackoverflow.com/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>

что расширение файла должно соответствовать вашей кодировке. И, конечно, этот параметр содержимого функции 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>

 OM The Eternity06 сент. 2017 г., 12:47
link.href = 'данные: приложения / октет-поток» + encodeURIComponent (адрес) это повреждает файл и, следовательно, не может быть открыт, могу предложить, почему это так
 AGE13 окт. 2015 г., 22:17
Пожалуйста, добавьте краткое объяснение к вашему ответу, чтобы сделать его релевантным для человека, который его спросил
 Richard Parnaby-King14 дек. 2016 г., 11:20
@ArjunChiddarwar Нет, это открывает уязвимости безопасности (представьте, что кто-то сохраняет вредоносный файл прямо в вашу папку Windows). Путь загрузки зависит от настроек браузера - например, по умолчанию Chrome будет загружать в вашу папку загрузок.
 Arjun Chiddarwar13 дек. 2016 г., 20:29
Можно'Я контролирую, где этот файл должен быть загружен? Это просто загружает, чтобы загрузить папку непосредственно. Я хочу, чтобы он использовал локальный путь файла HTML.
 Jeremy S.10 апр. 2018 г., 22:44
Спасибо за внимание к материалам о происхождении. Знаете ли вы, будут ли другие браузеры делать то же самое? Тьфу .. Я ненавижу кросс-происхождение.
 Amit11 июл. 2013 г., 12:26
Ричард Парнаби-Кинг: С помощью атрибута HTML 5 это можно сделать, но мне нужно сделать это БЕЗ использования HTML5 или каких-либо инструментов SERVER SIDE (если это возможно) Спасибо за помощников :)
 stacigh23 сент. 2014 г., 20:41
Пока не полностью поддерживается во всех браузерах, но этохорошее решение, если вы нене волнует IE или Safari.caniuse.com/#feat=download
 teleman22 июл. 2015 г., 20:11
Спасибо за решение HTML5. Как еще учестьсохранить как' что даваймне ввести имя файла перед сохранением?
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);     
 Sadi14 мая 2019 г., 11:48
Хорошее решение
 Pranav Labhe04 июл. 2016 г., 13:45
браузер сафари неатрибут поддержки загрузки t

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

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





   <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.08 мар. 2019 г., 12:06
пожалуйста, добавьте больше деталей, например, где этот код может быть использован.

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

<a href="link/to/My_Image_File.jpeg" download="">Download Image File</a>

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

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

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

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

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

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

ОБНОВЛЕНИЕ: С весны 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();
}
 Santosh18 апр. 2018 г., 20:14
Это работает и для перекрестного происхождения.
 picacode08 июн. 2018 г., 00:48
изображение загружается, но не открывается, как указано 'Изображение сломано

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

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

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

<a href="path_to/image.jpg" download="myImage">Download image</a>
 Design by Adrian30 июн. 2017 г., 15:23
Ссылка на изображение откроет изображение только в том же окне, если ваш браузер не настроен иначе.download атрибут неПоддерживается во всех браузерах.



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>


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

var link = document.createElement('a');
link.href = 'images.jpg';
link.download = 'Download.jpg';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
 codehelp423 сент. 2018 г., 04:25
Спасибо долженЯ был выбран ответ, так как вопрос задал, как это сделать в JAVASCRIPT.
 VectorVortec02 мая 2015 г., 22:32
Это решение работает и для видео. Я проверил это в Firefox и Chrome. Firefox решает воспроизвести видео при загрузке и сохраняет его в каталоге / tmp (в Linux - там, где оно было протестировано), а не в ""Загрузки» каталог. Хром не было проблем.
 Pavel13 мар. 2014 г., 11:10
На самом деле это очень хорошее решение для веб-приложений, где Javascript повсюду. Работает только в Google Chrome (в моей тестовой настройке), хотя.
 Mephiztopheles16 апр. 2015 г., 10:42
лучшее решение. Чтобы избежать мусора в использовании DOMsetTimeout( function () { link.parentNode.removeChild( link ); },10 );
 alexrussell08 мая 2014 г., 15:48
Любые идеи о том, как проверить совместимость? Я'Я хотел бы использовать эту технику, но должен также поддерживать другие браузеры, поэтому должен предложить альтернативу (например, открыть PDF в новом окне или ссылку для загрузки), когда это не так.т поддерживается. Кому-нибудь повезло с этим?
 akn13 июн. 2014 г., 13:55
Отличное решение, спасибо! Обратите внимание, что если вы опуститеdocument.body.appendChild(link) это победилоработать в Firefox. Это'Также хорошо удалить созданный элемент сdocument.body.removeChild(link); послеlink.click()

Ваш ответ на вопрос