Primo commit: trasferimento del progetto PPEasy

2024-09-18 10:30:50 +02:00
commit eb475f257e
4233 changed files with 1043848 additions and 0 deletions
@@ -0,0 +1,70 @@
+<html lang="en">
+<head>
+<title>Upload image using php and ajax whithout refreshing page </title>
+ 
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+</head>
+<body>
+   <div class="upload-div">
+    <!-- File upload form -->
+    <form id="uploadForm" enctype="multipart/form-data">
+        <label>Choose Images</label>
+        <input type="file" name="images[]" id="fileInput" multiple >
+        <input type="submit" name="submit" value="UPLOAD"/>
+    </form>
+	
+    <!-- Display upload status -->
+    <div id="uploadStatus"></div>
+	   
+</div>
+	
+	<!-- Gallery view of uploaded images --> 
+<div class="gallery"></div
+	
+</body>
+	
+	<script>
+$(document).ready(function(){
+    // File upload via Ajax
+    $("#uploadForm").on('submit', function(e){
+        e.preventDefault();
+        $.ajax({
+            type: 'POST',
+            url: 'upload.php',
+            data: new FormData(this),
+            contentType: false,
+            cache: false,
+            processData:false,
+            beforeSend: function(){
+                $('#uploadStatus').html('<img src="images/uploading.gif"/>');
+            },
+            error:function(){
+                $('#uploadStatus').html('<span style="color:#EA4335;">Images upload failed, please try again.<span>');
+            },
+            success: function(data){
+                $('#uploadForm')[0].reset();
+                $('#uploadStatus').html('<span style="color:#28A74B;">Images uploaded successfully.<span>');
+                $('.gallery').html(data);
+            }
+        });
+    });
+    
+    // File type validation
+    $("#fileInput").change(function(){
+        var fileLength = this.files.length;
+        var match= ["image/jpeg","image/png","image/jpg","image/gif"];
+        var i;
+        for(i = 0; i < fileLength; i++){ 
+            var file = this.files[i];
+            var imagefile = file.type;
+            if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2]) || (imagefile==match[3]))){
+                alert('Please select a valid image file (JPEG/JPG/PNG/GIF).');
+                $("#fileInput").val('');
+                return false;
+            }
+        }
+    });
+});
+</script>
+	
+</html>