JS implementation picture Preview and upload

HTML Code:

<input type= "File" id= "Fileid" onchange= "filesize (This)" runat= "Server" size= "" width= "200px" height= "25px"/>
<input type= "hidden" id= "hidden_s" runat= "Server"/>

<input id= "btnupload" type= "button" class= "btn btn-ltgreen" style= "Width:auto" value= "Upload" onclick= "UpLoad ()" Runa t= "Server"/> <!--"-
<input type= "button" id= "Clickupload" onserverclick= "uploadclient" style= "Display:none" runat= "Server"/>

<span id= "Spantext" runat= "Server" style= "color:red" ></span>

Click Upload to determine:

<script type= "Text/javascript" >
function UpLoad () {
if (Path = = "") {//Unchecked picture does not allow uploading, prompting the user
document.getElementById ("Spantext"). Innerhtml= "Please select the picture you want to upload! ";
return false;
}
else {
document.getElementById ("Clickupload"). Click (); Perform background uploads in accordance with upload criteria
return true;
}
}
</script>

Displays the file size when the file control is selected to determine whether to upload

<script type= "Text/javascript" >
function FileSize (ele) {
Returns the KB, leaving two digits after the decimal point
document.getElementById ("Spantext"). innerhtml= "";
var size = (ele.files[0].size/1024). toFixed (2);
document.getElementById ("hidden_s"). Value = size;
var show = "";
if (Size < 1024) {
Show = size + "KB";
}
else if (size >= 1024x768 && Size < 1024 * 1024) {
Show = Parsefloat (size/1024). toFixed (2) + "M";
}
document.getElementById ("Picsize"). InnerHTML = "File size:" +show;
var filepath = $ ("#fileid"). Val ();
var extstart=filepath.lastindexof (".");
var ext=filepath.substring (extstart,filepath.length). toUpperCase ();
if (ext!= ". GIF "&&ext!=". JPEG "&&ext!=". JPG ") {
document.getElementById ("Spantext"). innerhtml= "The upload file format is not correct, please confirm! ";
return false;
}
}
</script>

Add a preview image to a picture label

<script>
$ ("#fileid"). Change (function () {
var objurl = Getobjecturl (This.files[0]);
Console.log ("Objurl =" + Objurl);
if (Objurl) {
$ ("#Image1"). attr ("src", objurl);
}
});
Create a URL that can be accessed to the file
function Getobjecturl (file) {
var url = null;
if (window.createobjecturl! = undefined) {//Basic
url = window.createobjecturl (file);
} else if (window. URL! = undefined) {//Mozilla (Firefox)
url = window. Url.createobjecturl (file);
} else if (window.webkiturl! = undefined) {//WebKit or Chrome
url = window.webkitURL.createObjectURL (file);
}
return URL;
}
</script>

Background implementation of client upload function (may have duplicate judgment)

public void Uploadclient (object sender, EventArgs e)
{
if (Request.Files.Count > 0)//Use the client to implement the upload function
{
Httppostedfile Httppostfile = this. Request.files[0];
String fname = Httppostfile. FileName; Get the Upload file name
String exten = Path.getextension (fname); The suffix name of the uploaded file
string extension = Exten.  ToLower (); Perhaps the file suffix name
String fileName = DateTime.Now.ToString ("YYYYMMDDHHMMSS") + loginusername; Picture renaming
bool BL = false;
string[] Strarr = new string[] {". gif", ". jpeg", ". jpg"};//allow uploading of picture formats
if (convert.todouble (this.hidden_s.Value) <= 1024)
{
for (int i = 0; i < strarr.length; i++)
{
if (extension. ToLower () = = Strarr[i])
{
BL = true; Break
}
}
if (!BL)
{
this.spanText.InnerHtml = "Picture is not in the right format!" ";
Return
}
}
Else
{
this.spanText.InnerHtml = "Picture size exceeds 2m! ";
Return
}
int index = fname. LastIndexOf ("\ \") + 1;
int len = fname. Length-index;
fname = fname. Substring (index, Len);
Httppostfile. SaveAs (Server.MapPath (".") + "/upload/" + fileName + extension);//Save Picture
Picurl = "~/user/upload/" + fileName + extension; The path to the file saved on the server is recorded so that it can be saved to the server
IMAGE1.SRC = "~/user/upload/" + fileName; After uploading the image, the uploaded image is displayed in the picture frame of the page.
ADD (); Save the picture to the database.
Getuserm (); Refresh page Display Picture

}
}

JS implementation picture Preview and upload