Specific operations for uploading pictures in PHP

PHP+AJAX Upload the picture and see the preview effect , Xiaobian sees that many of them are form Form upload , It's hard to meet demand , adopt ajax Many online uploads are done directly , I didn't see any effect .

1. First step

Get a button and preview area at the front of the following code , adopt js Trigger upload to server .

<div class="form-group">
	<label class="col-sm-2 control-label"> picture </label>
	<div class="col-md-10">
		<!--  Select Picture  -->
		<label class="btn btn-default" for="uploadImg">
<!--lable Frame input It's for style ,for="uploadImg" Yes allow clicking lable Trigger to select Picture -->
			<input type="file" multiple accept="image/*" class="sr-only" name="img" id="uploadImg" value="">
			<!-- multiple Used to select multiple pictures , Only one picture can be selected if it is removed  -->
			<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title=""> Select Picture </span>
		</label>
	</div>

	<div class="col-md-9 col-md-offset-2">
		<div class="input-group multi-img-details" id="previewImg">
			<!--  Preview picture   The effect of the database can be written in a loop here -->
			
		</div>
	</div>
	<script> //  Select Picture trigger  $("#uploadImg").on("change", function () {
      //  Judge image format  var imgFiles = $(this)[0].files for (i = 0; i < imgFiles.length; i++) {
      filePath = imgFiles[i].name fileFormat = filePath.split('.')[1].toLowerCase() src = window.URL.createObjectURL(imgFiles[i]) if (!fileFormat.match(/png|jpg|jpeg/)) {
      alert(' Upload error , The file format must be ：png/jpg/jpeg') return } } //  Get picture information  var formData = new FormData(); //  Put multiple pictures into an array  for (var i = 0; i < this.files.length; i++) {
      formData.append('img' + i, this.files[i]) } //  To upload pictures  $.ajax({
      // The interface to the server  url: './index.php?c=upload_img', data: formData, contentType: false, processData: false, type: 'post', dataType: 'json', success: function (res) {
      var preview = document.getElementById("previewImg") var len = res.filename.length; // Cyclic output  for (var i = 0; i < len; i++) {
      //  The selected picture is placed in the preview area  var div = document.createElement('div') div.className = "multi-item"; var str = ''; str += '<img class="img-responsive img-thumbnail" src="{$ip}/' + res.filename[i] + '\ " οnerrοr="this.src=\'./resource/images/nopic.jpg\'; this.title=\' Picture not found .\'">\ <input name="thumbs[]" hidden="" value="'+ res.filename[i] + '">\ <em class="close" title=" Delete this picture " οnclick="deleteMultiImage(this)">×</em>'; div.innerHTML = str; preview.appendChild(div) } } }) // After uploading, the input[file] Of value Empty , Prevent the same picture from being uploaded for the second time  $("#uploadImg").attr('type','text'); $("#uploadImg").find('input').val(''); $("#uploadImg").attr('type','file'); }) //  Delete the picture in the preview area  function deleteMultiImage(elm) {
      $(elm).parent().remove(); // After deleting the picture in the preview area input[file] Of value Empty , Prevent the same picture from being uploaded for the second time  $("#uploadImg").attr('type','text'); $("#uploadImg").find('input').val(''); $("#uploadImg").attr('type','file'); } </script>
</div>

2. The second step
   The interface code of the server receives ajax Incoming picture file , Process the information of the picture .

//  To upload pictures 
	public  function doWebupload_img(){
    
			//  Get file information 
			$file = $_FILES;

			// Set some variables for address linking 
			$year = date("Y");
			$month = date("m");

			// Set the storage address 
			$uploaddir= "images/2/" . $year . "/" . $month. "/";

			//  Create when folder does not exist 
			$dir = ATTACHMENT_ROOT . "images/2/" . $year . "/" . $month;
			if (!file_exists($dir)) {
    
				mkdir($dir, 0777, true);
			}
			// Define an array 
			$filename = array();
			for($i = 0;$i<count($file);$i++){
    
				//  Split the picture name 
				$imgname=explode(".",$_FILES['img'.$i]['name']);// Array $imgname=array('picture','jpg')
				//  Set a new file name 
				$imgname[0]=date('YmdHis') . rand(100, 999);
				// The file name after uploading 
				$name=implode(".",$imgname);//$name=123.jpg
				// The name and address of the uploaded file  
				$uploadfile=$uploaddir.$name;
				//  Upload 
				move_uploaded_file($_FILES['img'.$i]['tmp_name'],ATTACHMENT_ROOT.$uploadfile);
				//  Take the file name and address of the picture 
				array_push($filename,$uploadfile);
			}
			//  return JSON data 
			echo json_encode(array('file'=>$file,'filename'=>$filename));
			exit;
		
	}

3. design sketch
   

The project done by the company originally had a built-in option to upload pictures , But there are steps , Upload pictures first , Then you can select a picture from the uploaded pictures . But this situation will be complicated , And if this project is used by multiple users , Everyone is a shared folder , Each other can see the pictures uploaded by others . So I spent two days uploading and previewing , I hope I can help those in need .