Ajax+PHP Achieve asynchrony Upload More pictures

HTML Code

<!--
date: 2018-04-27 13:46:55
author: Wang Zhaobo
descride: Upload multiple pictures
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax+PHP Achieve asynchronous upload multiple pictures </title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<style type="text/css">
#feedback{
min-height: 200px;
text-align: center;
border: 1px solid silver;
border-radius: 3px;
}
#feedback img{
margin:3px 10px;
border: 1px solid silver;
border-radius:3px;
padding: 6px;
width: 35%;
height: 85%;
}
#feedback p{
font-family: " Microsoft YaHei ";
line-height: 120px;
color: #ccc;
}
.file {
position: relative;
display: inline-block;
border: 1px solid #1ab294;
border-radius: 4px;
padding: 8px 16px;
overflow: hidden;
color: #fff;
text-decoration: none;
text-indent: 0;
line-height: 20px;
color: #1ab294;
} .file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.box{
margin-top: 10px;
text-align: center;
}
.box a{
margin-left: 10px;
}
</style>
</head>
<body>
<!-- The response returns to the data container -->
<div id="feedback">
</div>
<div class="box">
<a href="javascript:;" class="file"> Select Picture
<input type="file" multiple="multiple" id="inputfile" name="" class="photo">
</a>
<a href="javascript:;" class="file close"> To choose
<input type="buttom" class="photo">
</a>
</div>
<script type="text/javascript">
$(document).ready(function(){
// Response file add success event
var feedback = $("#feedback");
$("#inputfile").change(function(){
if (this.files.length>2) {
alert(" You can only choose two pictures at most ");
return false;
}
// establish FormData object
var data = new FormData();
// by FormData Object add data
$.each($('#inputfile')[0].files, function(i, file) {
data.append('ruoshui'+i, file);
});
// Additional data
data.append('id',1);
// send data
$.ajax({
url:'./upload.php',
type:'post',
data:data,
dataType:'json',
cache: false,
contentType: false,
processData: false,
// contentType: false and processData: false, These two parameters are for setting ajax Yes file File objects
success:function(data){
var str = '';
$.each(data,function(i,n){
str +='<img src="'+n+'">';
});
$("#feedback").append(str);
},
error:function(){
alert(' Upload error ');
}
});
});
$(".close").on("click",function(){
$("#feedback").empty();
});
});
</script>
</body>
</html>

PHP Code

<?php
/**
* date: 2018-04-27 13:46:55
* author: Wang Zhaobo
* descride: Upload multiple pictures
*/
header('content-type:text/html charset:utf-8');
$baseUrl = "./";
$picArr = "";
$index = 0;
foreach($_FILES as $file){
$picName = 'ruoshui' . $index;// Corresponding index.html FomData File naming in
$fileName = $_FILES[$picName]['name'];
// Upload only when the file doesn't exist
if(!file_exists($baseUrl.$fileName)) {
$isMoved = false; // Default upload failed
$MAXIMUM_FILESIZE = 1 * 1024 * 1024;// File size limit 1M = 1 * 1024 * 1024 B;
$picType = "/^\.(jpg|jpeg|gif|png){1}$/i";
if ($_FILES[$picName]['size'] <= $MAXIMUM_FILESIZE &&
preg_match($picType, strrchr($fileName, '.'))) {
$isMoved = @move_uploaded_file ( $_FILES[$picName]['tmp_name'], $baseUrl.$fileName);// Upload files
}
}
$picArr[] = $baseUrl.$fileName;
$index++;
}
echo json_encode($picArr);

design sketch

Ajax+PHP Achieve asynchronous upload multiple pictures of more related articles

  1. Ajax Forms are uploaded asynchronously ( Include file fields )

    cause When doing the front page , Need to call WebAPI Of Post request , Send some fields and files ( It's equivalent to passing the form through ajax Send out asynchronously , Get the result back ), Then get the return value to judge whether it is successful . Try First, I tried "jQu ...

  2. Ajax Use formdata Upload files asynchronously , Report errors the request was rejected because no multipart boundary was found

    be based on jQuery Of Ajaxs Use FormData Pay attention to the setting of two parameters when uploading files processData Set to false hold processData Set to false, Give Way jquery Don't take formData Do the processing , ...

  3. JQUERY AJAX No refresh asynchronous upload file

    AJAX No refresh upload file and display http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery For ...

  4. Struts2 Study ( Four ) utilize ajax Asynchronous upload

    The last one talked about how to struts2 Upload and download from . We used struts The label is submitted through the form , But we all know that form submission will cause the overall refresh of the page , It's a very unfriendly way , Let's talk about how to combine ajax Asynchronous mode ...

  5. php use jquery-ajax Upload multiple images, limit image size

    php use jquery-ajax Upload multiple images, limit image size /** * To upload pictures , The default size limit is 3M * @param String $fileInputName * @param number $siz ...

  6. ajax Asynchronous upload to the cloud again example tutorial

    author : White Wolf Source :www.manks.top/article/async_upload_to_upyun The copyright of this article belongs to the author , Welcome to reprint , However, this statement must be retained without the consent of the author , And in the article page obvious position gives the original link , no ...

  7. html5+php Implementation of file breakpoint continuation ajax Asynchronous upload

    html5+php Implementation of file breakpoint continuation ajax Asynchronous upload Prepare knowledge : Breakpoint continuation , Since there is a decision , Then there should be a file segmentation process , One by one . Previously, files couldn't be split , But as the HTML5 The introduction of new features , Like a normal string . Division of array , ...

  8. MVC 5.0(or5.0↓) Ajax.BeginForm Asynchronous upload attachment problem , The answer is No !

    MVC 5.0(or5.0↓)  Ajax.BeginForm Asynchronous upload attachment problem , The answer is No ! ( Notice what I'm talking about here !) Take a look at the next step file Code for // The front desk .cshtml file & ...

  9. java Use xheditor Ajax Asynchronous upload error

    java Use xheditor Ajax When uploading asynchronously, the error is as follows :the request doesn't contain a multipart/form-data or multipart/mixed s ...

Random recommendation

  1. .NET Core) Of ZooKeeper Asynchronous client

    Support disconnection and reconnection . permanent watcher. Recursive operation and cross platform (.NET Core) Of ZooKeeper Asynchronous client   Read the directory What is? ZooKeeper? Project introduction Features provided Instructions FAQ Within the company ...

  2. JQuery Overview

    One . What is? jQuery 1.jQuery It's a JavaScript library ,jQuery Greatly simplified JavaScript Programming . It's by encapsulating native JavaScript Function to get a set of well-defined methods . 2. it ...

  3. Chapter12&amp;Chapter13: Program instance

    Text query program requirement : The program allows users to query words in a given file . The query result is a list of the number of times the word appears in the file and the line it is in . If a word appears more than once in a line , This line only lists once . An analysis of the requirements : 1. Read in file , You have to remember that words appear ...

  4. Java Floating point in (Double&amp;Float) Calculation problem

    In a project just finished , Yes double The problem of imprecise calculation of type . After searching online , Problem solved . Experience sharing , Here's a summary . Java The type of floating point number in float and double Can't do accurate calculations . Sometimes it's not ...

  5. front end HTML body Tag related content Commonly used labels Tabular label table

    Tabular label table Form by <table> Label to define . Each table has several rows ( from <tr> Tag definition ), Each row is divided into cells ( from <td> Tag definition ). Letter td It's a watch ...

  6. windows Next golang Environment building

    (1)golang Installation configuration . Download address :https://www.golangtc.com/download After decompression, configure the system environment variables directly path, add go.exe The path of the file where it is located . Configure system environment variables G ...

  7. python Realization itemCF and userCF

    http://my.oschina.net/zhangjiawen/blog/185625 1 Collaborative filtering algorithm based on users : User based collaborative filtering algorithm is the oldest algorithm in recommendation system , It can be said that the birth of this algorithm marks the push ...

  8. Beta Stage ——Scrum Sprint blog day five

    One . A photo of the standing meeting that day Two . Everyone's job ( Yes work item Of ID), And record it in the code cloud project management The work done yesterday Complete part answer Making of interface , Match the question with the answer entered by the user . The correct answers are listed in turn ...

  9. Oracle FND API&ndash;Create User

    --API - fnd_user_pkg.createuser----Example -- -- ---------------------------------------- API to CRE ...

  10. HTML 5 File processing in FileAPI

    In many HTML5 Specification , Some of the specifications are related to document processing , In early browser technology , Processing small strings is js The best One of the long processes . But file processing , Especially binary file processing , It's always been a blank . In some cases , We have to go through Fla ...