Сначала я должен загрузить файл во временное место перед его чтением и вставить его в базу данных. Но как я могу включить загрузку gif, пока он делает все это, может кто-нибудь, пожалуйста, покажите мне? -Благодаря
<input type="file" name="myfile"> <input type="submit" id = "upload" value="Upload"> <div id= "loading_gif"> </div> $(document).ready(function () { $("#upload").click(function () { $.ajax({ type: "POST", url: "upload.php", enctype: 'multipart/form-data', data: { file: myfile }, success: function () { alert("Data has been Uploaded: "); } }); }); }); <?php $temp_location = "tmp/"; if(isset($_FILES["myfile"])) { if ($_FILES["myfile"]["error"] > 0) { echo "File loading error! "; } else { move_uploaded_file($_FILES["myfile"]["tmp_name"], $temp_location. $_FILES["myfile"] ["name"]); //read myfile and insert data into database echo "File uploaded into database"; } } ?> Я предполагаю, что у вас есть изображение loading.gif . поместите его в тег img и установите id для «загрузки», а затем сделайте его невидимым.
<img id='loading' src='loading.gif' style='visibility: hidden;'>
Вы должны создать javascript-функции, чтобы показывать и скрывать загружаемое изображение. Вот сценарий:
<script> function showLoading(){ document.getElementById("loading").style = "visibility: visible"; } function hideLoading(){ document.getElementById("loading").style = "visibility: hidden"; } </script>
Чтобы показать загружаемое изображение при загрузке, вызовите showLoading() jus перед вызовом ajax, а затем hideLoading() его, когда вы закончите загрузку с hideLoading() функции hideLoading() .
Вот реализация:
$("#upload").click(function () { //call show loading function here showLoading(); $.ajax({ type: "POST", url: "upload.php", enctype: 'multipart/form-data', data: { file: myfile }, success: function () { //call hide function here hideLoading(); alert("Data has been Uploaded: "); }, error : function (a) {//if an error occurs hideLoading(); alert("An error occured while uploading data.\n error code : "+a.statusText); } }); });
И я знаю, что вы знаете, где вы должны положить скрипт jquery в документ. : D
Теперь у вас должен быть JQUERY. попробуйте поместить следующий код в часть <head> вашего кода, это загружает библиотеку jquery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
поместите скрытый gif-загрузчик где-нибудь, где хотите отобразить
<img id="loading_gif" src="loading.gif" />
Скрыть его при загрузке страницы: $('#loading_gif').hide(); Hide $('#loading_gif').hide();
теперь в javascript-шоу и скрыть загрузчик
function submit() { $('#loading_gif').show(); // do your upload stuff $('#loading_gif').hide(); }
<style> .ajax_overlay {} .ajax_loader {background: url("loading.gif") no-repeat center center transparent;width:100%;height:100%;} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> function ajaxLoader (el, options) { // Becomes this.options var defaults = { bgColor : '#fff', duration : 800, opacity : 0.7, classOveride : false } this.options = jQuery.extend(defaults, options); this.container = $(el); this.init = function() { var container = this.container; // Delete any other loaders this.remove(); // Create the overlay var overlay = $('<div></div>').css({ 'background-color': this.options.bgColor, 'opacity':this.options.opacity, 'width':container.width(), 'height':container.height(), 'position':'absolute', 'top':'0px', 'left':'0px', 'z-index':99999 }).addClass('ajax_overlay'); // add an overiding class name to set new loader style if (this.options.classOveride) { overlay.addClass(this.options.classOveride); } // insert overlay and loader into DOM container.append( overlay.append( $('<div></div>').addClass('ajax_loader') ).fadeIn(this.options.duration) ); }; this.remove = function(){ var overlay = this.container.children(".ajax_overlay"); if (overlay.length) { overlay.fadeOut(this.options.classOveride, function() { overlay.remove(); }); } } this.init(); } </script> </script> var loader; $(document).ajaxStart(function(){ loader = new ajaxLoader('body', options); }); var options = { bgColor : '#fff', duration : 800, opacity : 0.7, classOveride : false } $(document).ajaxcomplete(function(){ if (loader) loader.remove(); }); </script>
для вашего кода
<style> .ajax_overlay {} .ajax_loader {background: url("loading.gif") no-repeat center center transparent;width:100%;height:100%;} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> function ajaxLoader (el, options) { // Becomes this.options var defaults = { bgColor : '#fff', duration : 800, opacity : 0.7, classOveride : false } this.options = jQuery.extend(defaults, options); this.container = $(el); this.init = function() { var container = this.container; // Delete any other loaders this.remove(); // Create the overlay var overlay = $('<div></div>').css({ 'background-color': this.options.bgColor, 'opacity':this.options.opacity, 'width':container.width(), 'height':container.height(), 'position':'absolute', 'top':'0px', 'left':'0px', 'z-index':99999 }).addClass('ajax_overlay'); // add an overiding class name to set new loader style if (this.options.classOveride) { overlay.addClass(this.options.classOveride); } // insert overlay and loader into DOM container.append( overlay.append( $('<div></div>').addClass('ajax_loader') ).fadeIn(this.options.duration) ); }; this.remove = function(){ var overlay = this.container.children(".ajax_overlay"); if (overlay.length) { overlay.fadeOut(this.options.classOveride, function() { overlay.remove(); }); } } this.init(); } </script> <input type="file" name="myfile"> <input type="submit" id = "upload" value="Upload"> <div id= "loading_gif"> </div> $(document).ready(function () { $("#upload").click(function () { var loader; $(document).ajaxStart(function(){ loader = new ajaxLoader('body', options); }); var options = { bgColor : '#fff', duration : 800, opacity : 0.7, classOveride : false } $.ajax({ type: "POST", url: "upload.php", enctype: 'multipart/form-data', data: { file: myfile }, success: function () { alert("Data has been Uploaded: "); $(document).ajaxcomplete(function(){ if (loader) loader.remove(); }); } }); }); }); <?php $temp_location = "tmp/"; if(isset($_FILES["myfile"])) { if ($_FILES["myfile"]["error"] > 0) { echo "File loading error! "; } else { move_uploaded_file($_FILES["myfile"]["tmp_name"], $temp_location. $_FILES["myfile"] ["name"]); //read myfile and insert data into database echo "File uploaded into database"; } } ?>