JQuery multiple file upload without refresh page

WEB-TM · Apr 20, 2019

ასეთი პრობლემა მაქვს, 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";
}
?>

Search

JQuery multiple file upload without refresh page

WEB-TM

Loading... 👽

Attachments