One of ASP. NET work notes: Image Upload preview and JavaScript Image Upload preview without refreshing upload

Recently, the project involves the function of uploading images without refreshing images, that is, uploading some covers. Then I want to select an image, the preview image appears on the right side (when it is not uploaded to the server). When you Click Upload, It is uploaded to the server (without refreshing the new upload), so you can find some information, this feature is implemented.

If you are tossing, you will be tossing it out. Write a note here.

First, the preview function is used. Cloudgamer's JavaScript Image Upload preview effect also encountered some problems, that is, I will set a button behind the File control to clear the values in the previous File, in addition, the default image is displayed in the preview image (for the project, when this record has a cover, its cover image is displayed ).

The JS Code is as follows:

// Clear the value of the File control and display the default image function clearFileInput () {var form = document. createElement ('form'); document. body. appendChild (form); // remember the position of file in the old form var file = document. getElementById ("idFile"); var pos = file. nextSibling; form. appendChild (file); form. reset (); // clear the document Value of the File control through reset. getElementById ("colspan "). appendChild (file); document. body. removeChild (form); // display the image in the preview. This is the document used when the browser supports filters. getElementById ("idImg "). style. filter = "progid: DXImageTransform. microsoft. alphaImageLoader (sizingMethod = 'Scale', src = 'images/abshiu.jpg '"; // This is the if (navigator. userAgent. indexOf ('Firefox ')> = 0) {$ ("# idImg "). attr ('src', 'images/abshiu.jpg ');}}

The HTML code is as follows:

<Table border = "0" class = "perview"> <tr> <th width = "45%"> select a file </th> <th width = "45%"> preview a picture </th> <th width = "10%"> upload an image </th> </tr> <td> <span id = "colspan"> <input id = "idFile" runat = "server" name = "pic" type = "file"/> </span> & nbsp; & nbsp; <input type = "button" id = "resets" name = "resets" value = "Restore" onclick = "clearFileInput () "/> </td> <td align =" center ">  </td> <input type = "button" name = "resets" value = "upload and save an image" onclick = "upLoadFile () "/> </td> </tr> </table> <script> var ip = new ImagePreview ($ (" idFile "), $ (" idImg "), {maxWidth: 200, maxHeight: 200, action: "ImagePreview. ashx "}); ip. img. src = ImagePreview. TRANSPARENT; ip. file. onchange = function () {ip. preview () ;}; </script>

If this is done, the preview effect will be done, and then the new upload will be refreshed. Although the cloudgamer Blog contains a simple file upload system, I did not use it, but used jquery. form. the Code is as follows:

Function upLoadFile () {var options = {type: "POST", url: 'files. ashx ', success: showResponse}; // pass options to ajaxForm $ (' # myForm '). ajaxSubmit (options);} function showResponse () {alert ("uploaded successfully! ");}

For jquery. form. js APIs, please try again. # MyForm is the form ID of the page, and Files. ashx is responsible for uploading and processing images. The code for Files. ashx is as follows:

public class File_WebHandler : IHttpHandler{    public void ProcessRequest(HttpContext context)    {        HttpFileCollection files = context.Request.Files;        if (files.Count > 0)        {            Random rnd = new Random();            for (int i = 0; i < files.Count; i++)            {                HttpPostedFile file = files[i];                if (file.ContentLength > 0)                {                    string fileName = file.FileName;                    string extension = Path.GetExtension(fileName);                    int num = rnd.Next(5000, 10000);                    string path = "file/" + num.ToString() + extension;                    file.SaveAs(System.Web.HttpContext.Current.Server.MapPath(path));                }            }        }    }    public bool IsReusable    {        get        {            return false;        }    }

The code here is a simple example. The source code of the example is attached:

Image Upload preview and refreshing upload