Ajax implementation of upload image instant preview function

This article is original, reprint please specify: HTTP://WWW.PM-ROAD.COM/INDEX.PHP/2014/07/31/50

Many sites in the upload of avatar or photo, there will be a preview function, combined with their own experience to implement the function; requirements: Image saved to the database Click to view Ajax upload image Instant Preview Another method (simple method)
Before, when I was doing the project, there is a function is to ask to upload the image to be displayed immediately, many sites will have such a case, where the code logic mostly to the image on the server after the return of the physical path of the picture, however, we used the framework is ExtJS 4.1, And because of some security reasons, the image in the upload process, the server can not appear in any clear text, so in the process of doing the project, all the data including text files, pictures, etc. are saved to Oracle. Let's start by combing this feature.

Implementation logic:
1: First, to achieve the function of Ajax upload files;
2: Save the uploaded file to the database;
3:ajax returns a UUID to the foreground;
4: The front desk to get this UUID, re-send the picture request, the database of byte data out, generate pictures;

Implementation method:
1: Because Ajax is an asynchronous request, you want to answer the purpose of Ajax can upload files, but also need to download jquery plug-ins Ajaxfileupload.js file (click to download); The JS principle is to upload files at the same time, automatically generate an IFrame object, which has a form form, through the form to upload the file function;
2: After the background to get the file, through the stream, save to the Oracle database, save the same time to generate a UUID, which is saved to the database of the primary key;
3: Return the UUID to the foreground;
4: In Ajax, get the returned UUID, and then create a new image HTML DOM document object, with the attribute src pointing to the URL of the image through the UUID.

Note: a lot of tutorials on the web, is to return the path of the picture in physical form, that is, similar to src = "http://wwww.pm-road.com/upload/X.pic", this method is to physically save the picture to the server, I'm here to save the picture in the database, not the path of the picture, but the byte code of the picture.

Here's some code:
As for ajaxfileupload.js how to upload files to the server, here do not do too much code, online there are many;
When the server receives the file:

===== Background Save the file to the database code (if the uploaded picture is not saved to the database, the following code can be ignored) ================
Files UploadFile = new file ();//Here This uploadfile is the uploaded document, here does not write the path or anything.
InputStream is = new FileInputStream (uploadfile);

The blob type is a file processing type that comes with Oracle, where the session is in Hibernate
session, not the request, session object created by the browser;
//So this environment is done in Hibernate,
blob blob = Session.getlobhelper (). Createblob (is,0);
//filedemo is an entity class of your own, which is primarily used for the mapping relationship of hibernate.
Filedemo demo = new Filedemo ();
//an attribute in the entity class that is the BLOB type of Oracle
Demo.setfileblob (BLOB);
//generate a random ID for querying the object
Demo.setid (random);
//Executes the Save () method of the session in Hibernate, saves the object to the database,
//After you run out of the flow, be sure to close
Is.close ();
===================== request a picture from the database by UUID ====================================

The front desk receives the UUID and then returns to the background
String uuid = Request.getparameter ("uuid");
Filedemo image = Session.get (UUID);
//convert the queried blob to InputStream
InputStream is = Image.getfileblob (). Getbinarystream ();
byte[] _b = new byte[1024];
while ((temp = Is.read (_b) >0) {
Os.write (_b,0, temp);
"
Is.close ();
if (OS! = null) {
Os.close ()
}
//The code will be processed so that the foreground can automatically generate pictures without other processing

================= file Upload, the front desk to get the UUID, the processing method ======================

var uuid = uuid obtained by Ajaxa;
Use JS to declare an IMG DOM object;
var image = "To display the div ID of a picture in real time, assign the HTML in the div to an image object, and it will be displayed automatically.
$ ("#divid"). HTML (image);

Ajax implementation of upload image instant preview function