node. js uploads images via Ajax
This stage, the use of the rest of the night with Node.js+mongdb+express+jade to achieve their own blog site, the blog in the post need to upload images, embedded in their own textarea tag implementation of the Markdown editor. This partial realization uses the Formdata function of HTML5 to realize
HTML code (JADE):
- Form#uploadfile
- Div.form-group
- Input#inputfile (type= "file" Name= "Inputfile")
- P.help-block#upfiletip only supports image uploads in PNG and IPG formats
- Button.btn.btn-success (type= "button" onclick= "Upfile ()") upload
Ajax code (JavaScript):
- Determine if the format of the picture is a PNG/IPG format
- function Judgephotoext (name) {
- if (name.length = = = 0) {
- $ ("#upfiletip"). CSS ("Color", "red");
- $ ("#upfiletip"). Text = "You did not select any pictures!!!" "
- return false;
- }
- var extname = name.substring (Name.lastindexof ('. '), name.length). toLowerCase ();
- if (extname! = '. png ' && extname! = '. IPG ') {
- $ ("#upfiletip"). CSS ("Color", "red");
- $ ("#upfiletip"). Text = "Only files in PNG and IPG format are supported!!!"
- return false;
- }
- return true;
- }
- Upload image file
- function Upfile () {
- var filename = $ ("#inputfile"). Val ();
- if (judgephotoext (filename)) {
- var data = new FormData ();
- var files = $ ("#inputfile") [0].files;
- if (files) {
- Data.append ("File", Files[0]);
- }
- $.ajax ({
- URL: '/blog/photo/new ',
- Type: ' POST ',
- Data:data,
- Async:false,
- Cache:false,
- Contenttype:false,
- Processdata:false,
- Success:function (data) {
- var text = $ ("#content-textarea"). Val ();
- Text = text+ "! [Photo Tip] ("+data+") ";
- $ ("#content-textarea"). val (text);
- $ (' #imageModal '). Modal (' hide ');
- },
- Error:function (Err) {
- Console.log (ERR);
- }
- })
- }
- }
Note: It is important to note that the ProcessData property is set to False, this is the property of HTML5, and if it is not set to false, this place will have a problem. The main is that the contents of the file do not want to be converted into strings. See the parameter explanation of jquery Ajax in detail: http://www.w3school.com.cn/jquery/ajax_ajax.asp
For the Formdata object, you can first create an empty Formdata object and then use the Append () method to add a field to the object (referring to a description of another site)
Like what:
- var omyform = New FormData ();
-
- omyform.append ("username", "Groucho");
- omyform.append ("AccountNum", 123456);//The number 123456 is immediately converted to the string "123456"
-
- // The file selected by the user is already included in Fileinputelement
- omyform.append ("UserFile", Fileinputelement.files[0]);
-
- var ofilebody = "hey!";//Blob object contains file contents
- var Oblob = new Blob ([ Ofilebody], {type: "Text/xml"});
-
- omyform.append ("Webmasterfile", Oblob);
-
- var oreq = new XMLHttpRequest ();
- oreq.open ("POST", "http://foo.com/submitform.php");
- oreq.send (omyform);
This part of the content needs to see the specific content of the Formdata object, you can view the URL: http://www.cnblogs.com/lhb25/p/html5-formdata-tutorials.html
The node. JS background code is as follows:
- Router.post ('/photo/new ', function (Req,res,next) {
- Let form = new formidable. Incomingform (); Create an Upload form
- Form.uploaddir = Upload_path;
- Form.keepextensions = true; Reserved suffix
- Form.maxfieldssize = 4*1024*1024; File size
- Form.parse (Req,function (err,fields,files) {
- if (err) {
- Res.send ("Insert tag failed");
- Return
- }
- Let extname = ";
- Let URLs = [];
- for (var key in files) {
- Let file = Files[key];
- Switch (file.type) {
- Case ' Image/pjpeg ':
- extname = ' jpg ';
- Break
- Case ' Image/jpeg ':
- extname = ' jpg ';
- Break
- Case ' image/png ':
- Extname = ' png ';
- Case ' image/x-png ':
- Extname = ' png ';
- Break
- }
- if (extname.length = = = 0) {
- Res.send ("Only support image files in PNG and JPG formats");
- Return
- }
- Let Savename = uuid.v1 () + '. ' +extname;
- Let Savepath = Form.uploaddir+savename;
- Urls.push (Photo_url+savename);
- Fs.renamesync (File.path,savepath);
- }
- Res.send (Urls[0]);
- })
- })
Using formidable library-assisted implementations
In fact, the most important is the use of formdata, with HTML5 to achieve this part of the asynchronous upload or relatively convenient
http://www.bkjia.com/PHPjc/1114324.html www.bkjia.com true http://www.bkjia.com/PHPjc/1114324.html techarticle node. js uploads images through Ajax this stage, using the rest of the night to use the Node.js+mongdb+express+jade to achieve their own blog site, the blog in the post need to use the upload ...