javascript - Open "Save As" Dialog Box To Download Image - Stack Overflow

I've been checking all over the place for an answer to this one but no luck.I want a button or lin

I've been checking all over the place for an answer to this one but no luck.

I want a button or link that will open the "Save As" dialog box. Simple?

I know I can open the image in a new window/tab (as I'm doing now) and then use the right-click, save as method but as the people using this are not the sharpest knives in the box, so I want to make the download as simple as possible.

The code at the moment is:

<button class="downloadButton" type="submit" onClick="window.open('<%=(rsContent.Fields.Item("ContentImage").Value)%>')">Download Image</button>

but this loads the image into a new window/new tab.

Just for the record, the users are using Windows XP with Internet Explorer 8 so we can't use the download HTML5 event.

I don't mind if its JavaScript, JQuery or classic ASP.

Thanks in advance for the help.

Pb

UPDATE

Using the MDN code Lankymart posted, I tried as-is and it worked (for the open/download of an Excel document), however, I tried changing parts to download images and it didn't work.

Here is the Classic ASP code:

<%
Dim rsImage__imageID
rsImage__imageID = "1"
If (Request.QueryString("imageID")  <> "") Then 
  rsImage__imageID = Request.QueryString("imageID") 
End If
%>
<%
Dim rsImage
Dim rsImage_cmd
Dim rsImage_numRows

Set rsImage_cmd = Server.CreateObject ("ADODB.Command")
rsImage_cmd.ActiveConnection = MM_ENG_STRING
rsImage_cmd.CommandText = "SELECT ContentID, ContentImage, DisplayImage FROM tblContent WHERE ContentImage = ?" 
rsImage_cmd.Prepared = true
rsImage_cmd.Parameters.Append rsImage_cmd.CreateParameter("param1", 5, 1, -1, rsImage__imageID) ' adDouble

Set rsImage = rsImage_cmd.Execute
rsImage_numRows = 0
%>

and the (badly) altered MDN code:

<%
'Set the content type to the specific type that you are sending.
Response.ContentType = "image/JPEG"

Const adTypeBinary = 1
Dim strImageFile

strImageFile = (rsImage.Fields.Item("ContentImage").Value) 'This is the path and name of the file on disk. 

Set objStream = Server.CreateObject("ADODB.Stream")
objStream.Open
objStream.Type = adTypeBinary
objStream.LoadFromFile strImageFile

Response.BinaryWrite objStream.Read

objStream.Close
Set objStream = Nothing
%>

I call it using:

<button class="downloadButton" type="submit" onClick="window.location.href='image-download.asp?imageID=<%=(rsContent.Fields.Item("ContentID").Value)%>';">Download Image</button>

The error it produces is:

The image “http://localhost:85/admin/english/image-download.…p?imageID=5” cannot be displayed because it contains errors.

The page code is:

<html>

    <head>
        <meta name="viewport" content="width=device-width; height=device-height;"></meta>
        <link rel="stylesheet" href="resource://gre/res/ImageDocument.css"></link>
        <link rel="stylesheet" href="resource://gre/res/TopLevelImageDocument.css"></link>
        <link rel="stylesheet" href="chrome://global/skin/media/TopLevelImageDocument.css"></link>
        <title>

            image-download.asp (JPEG Image)

        </title>
    </head>
    <body>
        <img src="http://localhost:85/admin/english/image-download.asp?imageID=5" alt="The image “http://localhost:85/admin/english/image-download.…p?imageID=5” cannot be displayed because it contains errors." title=""></img>
    </body>

</html>

I've been checking all over the place for an answer to this one but no luck.

I want a button or link that will open the "Save As" dialog box. Simple?

I know I can open the image in a new window/tab (as I'm doing now) and then use the right-click, save as method but as the people using this are not the sharpest knives in the box, so I want to make the download as simple as possible.

The code at the moment is:

<button class="downloadButton" type="submit" onClick="window.open('<%=(rsContent.Fields.Item("ContentImage").Value)%>')">Download Image</button>

but this loads the image into a new window/new tab.

Just for the record, the users are using Windows XP with Internet Explorer 8 so we can't use the download HTML5 event.

I don't mind if its JavaScript, JQuery or classic ASP.

Thanks in advance for the help.

Pb

UPDATE

Using the MDN code Lankymart posted, I tried as-is and it worked (for the open/download of an Excel document), however, I tried changing parts to download images and it didn't work.

Here is the Classic ASP code:

<%
Dim rsImage__imageID
rsImage__imageID = "1"
If (Request.QueryString("imageID")  <> "") Then 
  rsImage__imageID = Request.QueryString("imageID") 
End If
%>
<%
Dim rsImage
Dim rsImage_cmd
Dim rsImage_numRows

Set rsImage_cmd = Server.CreateObject ("ADODB.Command")
rsImage_cmd.ActiveConnection = MM_ENG_STRING
rsImage_cmd.CommandText = "SELECT ContentID, ContentImage, DisplayImage FROM tblContent WHERE ContentImage = ?" 
rsImage_cmd.Prepared = true
rsImage_cmd.Parameters.Append rsImage_cmd.CreateParameter("param1", 5, 1, -1, rsImage__imageID) ' adDouble

Set rsImage = rsImage_cmd.Execute
rsImage_numRows = 0
%>

and the (badly) altered MDN code:

<%
'Set the content type to the specific type that you are sending.
Response.ContentType = "image/JPEG"

Const adTypeBinary = 1
Dim strImageFile

strImageFile = (rsImage.Fields.Item("ContentImage").Value) 'This is the path and name of the file on disk. 

Set objStream = Server.CreateObject("ADODB.Stream")
objStream.Open
objStream.Type = adTypeBinary
objStream.LoadFromFile strImageFile

Response.BinaryWrite objStream.Read

objStream.Close
Set objStream = Nothing
%>

I call it using:

<button class="downloadButton" type="submit" onClick="window.location.href='image-download.asp?imageID=<%=(rsContent.Fields.Item("ContentID").Value)%>';">Download Image</button>

The error it produces is:

The image “http://localhost:85/admin/english/image-download.…p?imageID=5” cannot be displayed because it contains errors.

The page code is:

<html>

    <head>
        <meta name="viewport" content="width=device-width; height=device-height;"></meta>
        <link rel="stylesheet" href="resource://gre/res/ImageDocument.css"></link>
        <link rel="stylesheet" href="resource://gre/res/TopLevelImageDocument.css"></link>
        <link rel="stylesheet" href="chrome://global/skin/media/TopLevelImageDocument.css"></link>
        <title>

            image-download.asp (JPEG Image)

        </title>
    </head>
    <body>
        <img src="http://localhost:85/admin/english/image-download.asp?imageID=5" alt="The image “http://localhost:85/admin/english/image-download.…p?imageID=5” cannot be displayed because it contains errors." title=""></img>
    </body>

</html>
Share Improve this question edited May 23, 2017 at 11:59 CommunityBot 11 silver badge asked Mar 24, 2014 at 14:18 user2468538user2468538 20
  • Can't mark as duplicate - JavaScript: Prompting user to save file using a 'Save-as' dialog? but you should look at this question. – user692942 Commented Mar 24, 2014 at 14:23
  • Since my ment I've added an answer as you might not be able to do it with javascript, but you can kinda "fake" it with a image processing page. – user692942 Commented Mar 24, 2014 at 15:07
  • Now that you've shown the code you have tried what error do you get? Could you also include that? – user692942 Commented Mar 26, 2014 at 13:06
  • Updated question with error output. – user2468538 Commented Mar 26, 2014 at 14:36
  • From your very generic error it is unclear where your code is failing cannot be displayed because it contains errors is not going to help you debug your issue. Do you have your 500-100.asp setup for handling 500.100 Internal Server Errors in IIS?, without it no errors you receive will be meaningful. – user692942 Commented Mar 27, 2014 at 12:48
 |  Show 15 more ments

2 Answers 2

Reset to default 1

You can create a button that point to a link returning the image as a file and it will show the save option automatically instead of navigate to another page.

On the server side, specify the mime type as application/octect-stream

Update - Related to ments in the question

You may also find you need to include

Response.AddHeader("Content-Length", LenB(yourbinary))

To stop some browsers from failing to validate the payload. Also it's important the the ContentType matches what is sent if you are unsure use

Response.Content = "application/octet-stream"

There is no way to initiate the Save As Dialog from the browser via javascript but you can fake the browser into displaying the Save As dialog by setting the attachment value in the Content-Disposition HTTP header.

The way I've tackled this is use a ASP page to generate the image (via COM ponent, ADODB.Stream, database blob etc) that way you can use;

Response.AddHeader("Content-Disposition", "attachment;filename=myimage.jpg")

This will force the image to be saved rather than displayed inline. So with a script like this you can pass one querystring value to it to display inline (when viewing the image) and one to force it as an attachment which will force the Save As dialog (browser behaviour may be slightly different).

Streaming to the Browser

Using the ADODB.Stream object to output files to the browser.

  • Return an image using ASP, not .NET (StackOverflow)
  • How To Use the ADODB.Stream Object to Send Binary Files to the Browser through ASP (Microsoft Support).

In the past I've initiated the Save As dialog using javascript (but there is nothing stopping you using a HTML anchor tag to do the same thing without any javascript);

/* 
passing myimageid is a way of identifying the image to return 
be it a database or file system lookup.
*/
window.location.href = "/myimage.asp?id=myimageid&display=attachment";

Because the response es back as an attachment the location is never actually changed and the Save As dialog is displayed immediately with the name of the file passed from the Content-Disposition HTTP header in the file name box.

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745226157a4617470.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信