JQuery multiple file upload without refresh page | Cyber Community | Hi-Tech World - CYBSECGROUP
Welcome to the CYBSECGROUP Forum
You have the opportunity to get acquainted with interesting projects in an interesting environment
Registration

JQuery multiple file upload without refresh page

WEB-TM

Loading... 👽
CSG Member
Feb 18, 2019
7
3
#1
ასეთი პრობლემა მაქვს, JQuery multiple file upload_ით ფაილის ატვირთვის დროს გვერდი განახლებას აგეთებს, რის გამოც html ფორმში აკრებილი ტექსტი ქრება (ბუნებრივი ამბავი რომ ასე მოხდება) როგორ გავაკეთო ისე რომ ფაილის ატვირთვის შემდეგ გვერდმა განახლება არ გააკეთოს?

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">

<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>AJAX File Upload - Web Developer Plus Demos</title>

<script type="text/javascript" src="js/jquery-1.3.2.js" ></script>

<script type="text/javascript" src="js/ajaxupload.3.5.js" ></script>

<link rel="stylesheet" type="text/css" href="./styles.css" />


<script type="text/javascript" >

    $(function(){

        var btnUpload=$('#upload');

        var status=$('#status');

        new AjaxUpload(btnUpload, {

            action: 'upload-file.php',

            name: 'uploadfile',

            onSubmit: function(file, ext){

                 if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){

                    // extension is not allowed

                    status.text('Only JPG, PNG or GIF files are allowed');

                    return false;

                }

                status.text('Uploading...');

            },

            onComplete: function(file, response){

                //On completion clear the status

                status.text('');

                //Add uploaded file to list

                if(response==="success"){

              

                 document.getElementById('myText').value = ''+file+'';

              

                    $('<li></li>').appendTo('#files').html('<img src="./uploads/'+file+'" alt="" /><br />'+file).addClass('success');

                } else{

                    $('<li></li>').appendTo('#files').text(file).addClass('error');

                }

            }

        });

      

    });

</script>


        <table>

        <tr>

        <td>

        <input style="padding: 10px;" type="text" id="myText" class="asi" name="articlreicon" maxlength="255">

        </td>

        <td>

        <div style="background: #6699FF; padding: 10px; color: white;" onclick="myFunctionTUMBLINK()" class="btn btn-primary">ok</div>

        </td>

        </tr>

        </table>



<div id="mainbody" >

        <h3>&raquo; AJAX File Upload Form Using jQuery</h3>

        <!-- Upload Button, use any id you wish-->

        <div id="upload" ><span>Upload File<span></div><span id="status" ></span>

      

        <ul id="files" ></ul>

</div>


</body>



upload-file.php
PHP:
<?php
$uploaddir = './uploads/';
$file = $uploaddir . basename($_FILES['uploadfile']['name']);

if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file)) {
  echo "success";
} else {
    echo "error";
}
?>


sc.png
 

Attachments