PHP + Ajax + JS: multimap upload and multiple ajax Images

Source: Internet
Author: User
Tags learn php programming

PHP + Ajax + JS: multimap upload and multiple ajax Images

In this example, an ajax multi-Image Upload task is required for the wap site project, which is combined with the js plug-in for your reference. The specific content is as follows:

/* Upload an image through ajax */var num = 0; // click "delete image function onDelete (num) {if ($ (" # "+ num ). attr ('src ')! = "_ PUBLIC _/Home/images/jiazai.gif" & $ ("#" + num). attr ('src ')! = "") {If (confirm ("are you sure you want to delete") {$ ("# a" + num ). remove () ;}else {// }}$ (function () {$ ("# file0 "). bind ("change", function () {clickUpload (num) ;}); function clickUpload (num) {var imgObject = document. getElementById ('file0'); // file object $ ("# yulan "). append ("<a id = 'a" + num + "'onclick = 'ondelete (" + num + ") 'href = 'javascript :; '>  </a> "); // $ ("# Yulan "). append ("<li id = 'a" + num + "'>  <a href = 'javascript :; 'onclick = 'ondelete ("+ num +") '> Delete </a> </li> "); var getImageSrc = getFullPath (imgObject ); // local path // instantiate the image object var pos = getImageSrc. lastIndexOf (". "); var lastname = getImageSrc. substring (pos, getImageSrc. length) // image suffix if (lastname! = ". Jpg" & lastname! = ". Png" & lastname! = ". Jpeg" & lastname! Images '.gif ') {$ ("# a" + num ). remove (); alert ("select an image");} else {ajaxFileUpload (num); $ ("# file0 "). unbind ("change "). bind ("change", function () {clickUpload (num) ;});} num ++;} function getFullPath (obj) {// obtain the complete image path if (obj) {if (window. navigator. userAgent. indexOf ("MSIE")> = 1) {obj. select (); return document. selection. createRange (). text;} else if (window. navigator. userAgent. indexOf ("Firefox")> = 1) {if (o Bj. files) {return obj. files. item (0 ). getAsDataURL ();} return obj. value;} return obj. value ;}} function ajaxFileUpload (num) {$. ajaxFileUpload ({url: 'http: // xxxx/updateImg ', // secureuri: false, // whether the security protocol is required, generally set to false fileElementId: 'file0', // The ID dataType of the file upload field: 'json', // the return value type is generally set to json success: function (data) // The server responds to the processing function {var jsonText = data; console. log (jsonText); if (json Text ['status'] = 1) {if (jsonText ['info']! = "") {Console. log (jsonText ['info']); $ ("#" + num ). attr ("src", "_ PUBLIC _ // Admin/Upload/" + jsonText ['info']); var images =$ ("# img "). val (); if (images! = "") {$ ("# Img "). val (images + "," + jsonText ['info']);} else {$ ("# img "). val (images + "" + jsonText ['info']) ;}} else {$ ("# a" + num ). remove (); // alert ("Image Upload Failed") ;}}, error: function (data, e) // server response failure handler {alert (e );}})}});

The above is all the content of this article. I hope it will help you learn php programming.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.