2013-07-08 3 views
51

Мне нужен браузер для загрузки файлов изображений так же, как и при нажатии на листе excel.заставить браузер загружать файлы с изображениями по клику

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

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script type="text/javascript" src="Scripts/jquery-1.10.2.js"> 
$(document).ready(function() { 
    $("*").click(function() { 
     $("p").hide(); 
    }); 
}); 
</script>  
</head> 

<script type="text/javascript"> 
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); 
      } 
     } 

</script> 
<body> 
<form id="form1" runat="server"> 
<div> 
<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> 
</div> 
</form> 
</body> 
</html> 

Может ли кто-нибудь помочь мне с работой в случае загрузки листа excel (что делают браузеры).

+5

Параметр 'download' атрибут. –

+4

Лучший способ обеспечить загрузку файлов - установить настройку содержимого на сервере, большинство клиентских решений не так надежно. – adeneo

+1

Возможный дубликат: http://stackoverflow.com/questions/2408146/href-image-link-download-on-click? –

ответ

109

Используя HTML5, вы можете добавить атрибут «загрузить» на свои ссылки.

<a href="/path/to/image.png" download>

броузеры будут предложено загрузить изображение с тем же именем файла (в данном примере image.png).

Если указать значение этого атрибута, то это станет новое имя файла:

<a href="/path/to/image.png" download="AwesomeImage.png">

+0

Ричард Парнаби-Кинг: Используя атрибут HTML 5, это можно сделать, но мне нужно сделать это БЕЗ использования HTML5 или любых инструментов SERVER SIDE (если это возможно) Спасибо за помощников :) – Amit

+2

Не поддерживается полностью во всех браузерах, но это хорошее решение, если вы не заботитесь об IE или Safari. http://caniuse.com/#feat=download – stacigh

+0

Спасибо, за решение HTML5. Как еще разрешить «сохранить как», чтобы мы могли ввести имя файла перед сохранением? – teleman

-14

Вам не нужно писать JS, чтобы сделать это, просто используйте:

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

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

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

<a href="path_to/image.jpg" download="myImage">Download image</a> 
+0

Ссылка на изображение откроет изображение в этом же окне, если только ваш браузер настроен по-разному. Атрибут 'download' не поддерживается во всех браузерах. –

60

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

var link = document.createElement('a'); 
link.href = 'images.jpg'; 
link.download = 'Download.jpg'; 
document.body.appendChild(link); 
link.click(); 
+1

Это действительно очень приятное решение для веб-приложений, где Javascript повсюду. Однако работает только в Google Chrome (в моей тестовой настройке). – Pavel

+0

Любые идеи о способе тестирования на совместимость? Я бы хотел использовать эту технику, но вам также необходимо поддерживать другие браузеры, поэтому для этого вам нужно будет предложить альтернативу (например, открыть PDF в новом окне или ссылку для загрузки), если это не поддерживается. Кому-нибудь повезло с этим? – alexrussell

+12

Отличное решение, спасибо! Обратите внимание: если вы опустите 'document.body.appendChild (link)', то он не будет работать в firefox. Также полезно удалить созданный элемент с помощью 'document.body.removeChild (link);' after 'link.click()' – akn

0
<html> 
<head> 
<script type="text/javascript"> 
function prepHref(linkElement) { 
    var myDiv = document.getElementById('Div_contain_image'); 
    var myImage = myDiv.children[0]; 
    linkElement.href = myImage.src; 
} 
</script> 
</head> 
<body> 
<div id="Div_contain_image"><img src="YourImage.jpg" alt='MyImage'></div> 
<a href="#" onclick="prepHref(this)" download>Click here to download image</a> 
</body> 
</html> 
-2

Я обнаружил, что

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

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

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

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

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

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

+1

? Download = true передается на Google Диск, чтобы сообщить своему серверу отправить правильный заголовок для загрузки изображения. Это не то, что могло бы работать в любой другой среде, если бы оно не было специально настроено таким образом. – muncherelli

7
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);  
+3

браузер Safari не поддерживает атрибут загрузки –

4

Это решение проблемы. Но есть одна очень важная часть, что расширение файла должно соответствовать вашей кодировке. И, конечно же, этот параметр содержимого функции 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: <image id="img" src="data:image/gif;base64,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kzAP/s7P+goOXMv8+fhw/v739/f+8PD98fH/8mJl+fn/9ZWb8/PzWlwv///6wWGbImAPgTEMImIN9gUFCEm/gDALULDN8PAD6atYdCTX9gUNKlj8wZAKUsAOzZz+UMAOsJAP/Z2ccMDA8PD/95eX5NWvsJCOVNQPtfX/8zM8+QePLl38MGBr8JCP+zs9myn/8GBqwpAP/GxgwJCPny78lzYLgjAJ8vAP9fX/+MjMUcAN8zM/9wcM8ZGcATEL+QePdZWf/29uc/P9cmJu9MTDImIN+/r7+/vz8/P8VNQGNugV8AAF9fX8swMNgTAFlDOICAgPNSUnNWSMQ5MBAQEJE3QPIGAM9AQMqGcG9vb6MhJsEdGM8vLx8fH98AANIWAMuQeL8fABkTEPPQ0OM5OSYdGFl5jo+Pj/+pqcsTE78wMFNGQLYmID4dGPvd3UBAQJmTkP+8vH9QUK+vr8ZWSHpzcJMmILdwcLOGcHRQUHxwcK9PT9DQ0O/v70w5MLypoG8wKOuwsP/g4P/Q0IcwKEswKMl8aJ9fX2xjdOtGRs/Pz+Dg4GImIP8gIH0sKEAwKKmTiKZ8aB/f39Wsl+LFt8dgUE9PT5x5aHBwcP+AgP+WltdgYMyZfyywz78AAAAAAAD///8AAP9mZv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAKgALAAAAAA9AEQAAAj/AFEJHEiwoMGDCBMqXMiwocAbBww4nEhxoYkUpzJGrMixogkfGUNqlNixJEIDB0SqHGmyJSojM1bKZOmyop0gM3Oe2liTISKMOoPy7GnwY9CjIYcSRYm0aVKSLmE6nfq05QycVLPuhDrxBlCtYJUqNAq2bNWEBj6ZXRuyxZyDRtqwnXvkhACDV+euTeJm1Ki7A73qNWtFiF+/gA95Gly2CJLDhwEHMOUAAuOpLYDEgBxZ4GRTlC1fDnpkM+fOqD6DDj1aZpITp0dtGCDhr+fVuCu3zlg49ijaokTZTo27uG7Gjn2P+hI8+PDPERoUB318bWbfAJ5sUNFcuGRTYUqV/3ogfXp1rWlMc6awJjiAAd2fm4ogXjz56aypOoIde4OE5u/F9x199dlXnnGiHZWEYbGpsAEA3QXYnHwEFliKAgswgJ8LPeiUXGwedCAKABACCN+EA1pYIIYaFlcDhytd51sGAJbo3onOpajiihlO92KHGaUXGwWjUBChjSPiWJuOO/LYIm4v1tXfE6J4gCSJEZ7YgRYUNrkji9P55sF/ogxw5ZkSqIDaZBV6aSGYq/lGZplndkckZ98xoICbTcIJGQAZcNmdmUc210hs35nCyJ58fgmIKX5RQGOZowxaZwYA+JaoKQwswGijBV4C6SiTUmpphMspJx9unX4KaimjDv9aaXOEBteBqmuuxgEHoLX6Kqx+yXqqBANsgCtit4FWQAEkrNbpq7HSOmtwag5w57GrmlJBASEU18ADjUYb3ADTinIttsgSB1oJFfA63bduimuqKB1keqwUhoCSK374wbujvOSu4QG6UvxBRydcpKsav++Ca6G8A6Pr1x2kVMyHwsVxUALDq/krnrhPSOzXG1lUTIoffqGR7Goi2MAxbv6O2kEG56I7CSlRsEFKFVyovDJoIRTg7sugNRDGqCJzJgcKE0ywc0ELm6KBCCJo8DIPFeCWNGcyqNFE06ToAfV0HBRgxsvLThHn1oddQMrXj5DyAQgjEHSAJMWZwS3HPxT/QMbabI/iBCliMLEJKX2EEkomBAUCxRi42VDADxyTYDVogV+wSChqmKxEKCDAYFDFj4OmwbY7bDGdBhtrnTQYOigeChUmc1K3QTnAUfEgGFgAWt88hKA6aCRIXhxnQ1yg3BCayK44EWdkUQcBByEQChFXfCB776aQsG0BIlQgQgE8qO26X1h8cEUep8ngRBnOy74E9QgRgEAC8SvOfQkh7FDBDmS43PmGoIiKUUEGkMEC/PJHgxw0xH74yx/3XnaYRJgMB8obxQW6kL9QYEJ0FIFgByfIL7/IQAlvQwEpnAC7DtLNJCKUoO/w45c44GwCXiAFB/OXAATQryUxdN4LfFiwgjCNYg+kYMIEFkCKDs6PKAIJouyGWMS1FSKJOMRB/BoIxYJIUXFUxNwoIkEKPAgCBZSQHQ1A2EWDfDEUVLyADj5AChSIQW6gu10bE/JG2VnCZGfo4R4d0sdQoBAHhPjhIB94v/wRoRKQWGRHgrhGSQJxCS+0pCZbEhAAOw==" /> 
 

 

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

+3

Пожалуйста, добавьте короткое объяснение в свой ответ, чтобы сделать его актуальным для человека, который его задал – AGE

+0

link.href = 'data: application/octet-stream,' + encodeURIComponent (адрес) это развращает файл и, следовательно, не может быть открыто, canu подсказывает, почему это так –

1

Попробуйте это:

<a class="button" href="http://www.glamquotes.com/wp-content/uploads/2011/11/smile.jpg" download="smile.jpg">Download image</a> 
Смежные вопросы