node. js uploads images via Ajax _php Tutorial

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 ...

