Upload pictures, pictures are generally through the save to disk, and then keep the file name (path) to the database, save directly lead to large database memory, causing slow, caton
1, add a picture ID, set the style of the picture, three high,
& lt; Img SRC="" id=" userPicture ondblclick "=" showImageSelectDialog () "style=" Max - width: 240 px; Max - height: 240 px; Min - width: 100 px; Min - height: 100 px; Border: solid # 1 px b7b2b2 "/& gt;
2, hidden files checkbox for pop-up avatars, images are generally JPEG, JPG format, such as filtered with the accept the picture, so, define an ID and a change event
3, a click event to the picture: double click on the picture, triggers the click event of file input box to open the file selection
The function showImageSelectDialog () {$(" # userPictureFile "). Click (); }
Filereader, file reader, here are used to read the image file, use regular expressions to filter the image/jpeg, image/PNG image/JPG, image/GIF image/BMP file format
Var imageReader=new FileReader ();
RegexImageFilter
=/^ (? : image \/BMP | image \/| GIF image \/JPG | image \/jpeg | image \/PNG) $/I;
4, add an onl oad event to file reader, it reads the file after the completion of the trigger,
ImageReader. onl oad=function (evt) {$(" # userPicture "). Attr (" SRC ", evt. Target. The result); }
1, add change events to file input box
The function loadImgToImg () {
1). Access to the inside of the file input box files, must be converted to JavaScript files, use. The value is not the file
Var file=$(" # userPictureFile "). The get (0) files [0].
2). To determine whether read the file need to file type, if it is, to read the file with readAsDataURL readAsDataURL is used to read the file, and put the files into a URL (Base64 encoding), convenient and stored in a database, won't take up too much memory, if not, pop-up box
If (regexImageFilter. Test (file. Type)) {imageReader. ReadAsDataURL (file);
} else {alert (" choice is not a valid image file "); }
}
2, send a request, use the jQuery Ajax send formData data,
Var form=new FormData ();
Form. Append (" userPicture, "userPicture);
$. Ajax ({
Method: "post", file upload can only be used when the post submission and cannot be submitted using the get
Url: '@ url. Content (" ~/OthersMaintenance OpenOffNumber/InsertUser ")',
Data: the form,
ProcessData: false, don't sent to deal with data//tell jQuery
ContentType: false,//tell jQuery request not to set the content-type header
Success: the function (MSG) {
If (MSG) State) {
//success
Layer. Alert (MSG) Text, {icon: 1});
$(" # userPicture "). Attr (" SRC ", "");//to empty the preview of the picture
$(" # frmUser [type='reset'] "). Click ();//to empty form
} else {//failure layer. Alert (MSG) Text, {2} icon:); }
}
});
3, is used to control HttpPostedFileBase receiving data
4, save the avatars, check whether there is a store user avatar directory, if not, create a directory
if (! System. IO. Directory. The Exists (for Server MapPath (" ~/Document/userPicture/")))
{System. IO. Directory. CreateDirectory (for Server MapPath
(" ~/Document/userPicture/")); }
5, determine whether to upload pictures, pictures can't be empty, the file size is greater than 0
The expansion of the 1). Access to the file name
String imgExtension=System. IO. Path. GetExtension (userPicture. FileName);
2.) joining together to save the file name
The string fileName=DateTime. Now. The ToString () "yyyyMMddHHmmssffff" + "_" + Guid. NewGuid () + imgExtension;
3.) the stitching file path
String filePath=Server. MapPath (" ~/Document/userPicture/") + fileName.
4).
save uploaded files to the hard diskUserPicture. SaveAs (filePath);
5). Save the file name to the user object
The user. The picture=fileName;