关键词：
<form name="upload" class="text-left">
<div class="form-group">
<label for="inputBoardCount">Количество плат в заказе<span class="text-primary">*</span></label>
<input type="number" class="form-control" id="inputBoardCount" placeholder="Введите количество" min="1">
</div>
<div class="form-group">
<label>Прикрепите файлы проекта<span class="text-primary">*</span></label>
<div class="file-upload"><label><input type="file" multiple="multiple" class="form-control-file" id="inputFile"><span class="file-name btn btn-secondary"><span class="icon icon-cloud"></span> Добавить файлы</span></label></div>
<div class="file-upload-progress" style="display:none">
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="mt-2">загружено <span class="loaded"></span class="loaded"> мб из <span class="total"></span> мб</div>
</div>
<div class="ajax-reply" hidden></div>
<div class="success-msg" style="display:none;color:#009900;">Файл успешно загружен</div>
</div>
<div class="form-group">
<div class="error-msg text-primary" style="display:none;"></div>
<button type="button" class="btn btn-lg btn-primary w-100 js-send-order" data-toggle="modal" data-target="#quickOrderModal"><span class="icon icon-magnifer"></span> Получить бесплатную <br>оценку проекта</button>
</div>
</form>
jQuery(document).ready(function($)
// ссылка на файл AJAX обработчик
var ajaxurl = '/wp-admin/admin-ajax.php';
// var nonce = '<?= wp_create_nonce('uplfile') ?>';
var files; // переменная. будет содержать данные файлов
// заполняем переменную данными, при изменении значения поля file
$('input[type=file]').on('change', function()
files = this.files;
$('.file-upload').hide();
$('.file-upload-progress').fadeIn();
$('.error-msg').slideUp();
event.stopPropagation(); // остановка всех текущих JS событий
event.preventDefault(); // остановка дефолтного события для текущего элемента - клик для <a> тега
// ничего не делаем если files пустой
if( typeof files == 'undefined' ) return;
// создадим данные файлов в подходящем для отправки формате
var data = new FormData();
$.each( files, function( key, value )
data.append( key, value );
);
// добавим переменную идентификатор запроса
data.append( 'action', 'ajax_fileload' );
// data.append( 'nonce', nonce );
// data.append( 'post_id', '5' );
var $reply = $('.ajax-reply');
function setProgress(e)
if (e.lengthComputable)
var complete = e.loaded / e.total;
let pr = Math.floor(complete*100)+"%";
$('.progress-bar').css('width', pr);
$('.loaded').text(Math.floor(e.loaded/1000000));
$('.total').text(Math.floor(e.total/1000000));
// AJAX запрос
// $reply.text( 'Загружаю...' );
$.ajax(
xhr: function()
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", setProgress, false);
xhr.addEventListener("progress", setProgress, false);
return xhr;
,
url : ajaxurl,
type : 'POST',
data : data,
cache : false,
dataType : 'json',
// отключаем обработку передаваемых данных, пусть передаются как есть
processData : false,
// отключаем установку заголовка типа запроса. Так jQuery скажет серверу что это строковой запрос
contentType : false,
// функция успешного ответа сервера
success : function( respond, status, jqXHR )
// ОК
if( respond.success )
$.each( respond.data, function( key, val )
$reply.append( '<p>'+ val +'</p>' );
$('.file-upload-progress').hide();
$('.file-upload').fadeIn();
$('.success-msg').slideDown();
);
// error
else
$reply.text( 'ОШИБКА: ' + respond.error );
,
// функция ошибки ответа сервера
error: function( jqXHR, status, errorThrown )
$reply.text( 'ОШИБКА AJAX запроса: ' + status );
);
);
)
$('.js-send-order').click(function(e)
e.preventDefault();
var files = $('.ajax-reply').html();
var boardCount = $('#inputBoardCount').val();
if(files == '')
e.stopPropagation();
$('.error-msg').text('Прикрепите файлы проекта');
$('.error-msg').slideDown();
return;
if( boardCount == '' )
e.stopPropagation();
$('.error-msg').text('Введите количество плат в заказе');
$('.error-msg').slideDown();
return;
$('.error-msg').slideUp();
$('input[name="your-files"]').val(files);
$('input[name="order-amount"]').val(boardCount);
// $(this).blur();
);
add_action( 'wp_ajax_'.'ajax_fileload', 'ajax_file_upload_callback' );
add_action( 'wp_ajax_nopriv_'.'ajax_fileload', 'ajax_file_upload_callback' );
// обработчик AJAX запроса
function ajax_file_upload_callback()
// check_ajax_referer( 'uplfile', 'nonce' ); // защита
if( empty($_FILES) )
wp_send_json_error( 'Файлов нет...' );
$post_id = (int) $_POST['post_id'];
// ограничим размер загружаемой картинки
$sizedata = getimagesize( $_FILES['upfile']['tmp_name'] );
$max_size = 5000;
if( $sizedata[0]/*width*/ > $max_size || $sizedata[1]/*height*/ > $max_size )
wp_send_json_error( __('Картинка не может быть больше чем '. $max_size .'px в ширину или высоту...','km') );
// обрабатываем загрузку файла
require_once ABSPATH . 'wp-admin/includes/image.php';
require_once ABSPATH . 'wp-admin/includes/file.php';
require_once ABSPATH . 'wp-admin/includes/media.php';
// фильтр допустимых типов файлов - разрешим только картинки
add_filter( 'upload_mimes', function( $mimes )
return [
'jpg|jpeg|jpe' => 'image/jpeg',
'gif' => 'image/gif',
'png' => 'image/png',
];
);
$uploaded_imgs = array();
foreach( $_FILES as $file_id => $data )
$attach_id = media_handle_upload( $file_id, $post_id );
// ошибка
if( is_wp_error( $attach_id ) )
$uploaded_imgs[] = 'Ошибка загрузки файла `'. $data['name'] .'`: '. $attach_id->get_error_message();
else
$uploaded_imgs[] = wp_get_attachment_url( $attach_id );
wp_send_json_success( $uploaded_imgs );
php使用进度条下载php/curl文件(代码片段)
查看详情
htmljs通过进度条上传文件(代码片段)
查看详情
我需要知道已经上传了多少字节来更新进度条android(代码片段)
...频了。我需要在上传文件时显示进度条。我有下一个代码使用AsyncTask和HTTP4.1.1库来模拟FORM。classuploadVideoextendsAsyncTask<Void,Void,String>@OverrideprotectedStringdoInBackground(Voi 查看详情
[layui]上传文件带进度条+表单提交功能优化(代码片段)
上传文件带进度条+表单提交功能优化前期做了一个简视频提交；每次只提交一个需要重新上传。视频文件较大时候没有进度提示，用户体验并不好，今天做一个简单的优化！如果监听提交表单时候，回调路径可能还未完成。提... 查看详情
jquery上传文件显示进度条(代码片段)
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><scriptsrc="../js/jquery.js"></script></head><body><h2>HTML5异步上传文件，带进度条(jQuery)</h2><formm 查看详情
layui文件上传进度条（模拟）(代码片段)
1.修改上传组件js(没测)https://blog.csdn.net/weixin_42457316/article/details/81017471https://www.cnblogs.com/youmingkuang/p/9183528.htmlhttps://fly.layui.com/jie/19430/ 1、upload.js扩展功能利用ajax的xhr属性实现该功能修改过 查看详情
使用 jQuery 的文件上传进度条
】使用jQuery的文件上传进度条【英文标题】：FileuploadprogressbarwithjQuery【发布时间】：2013-03-0220:39:19【问题描述】：我正在尝试在我的项目中实现AJAX文件上传功能。我为此使用jQuery；我的代码使用AJAX提交数据。我还想实现一个文... 查看详情
使用 jQuery 的文件上传进度条
】使用jQuery的文件上传进度条【英文标题】：FileuploadprogressbarwithjQuery【发布时间】：2013-03-0220:39:19【问题描述】：我正在尝试在我的项目中实现AJAX文件上传功能。我为此使用jQuery；我的代码使用AJAX提交数据。我还想实现一个文... 查看详情
jquery文件上传进度条不准确
...curate【发布时间】：2014-04-3020:45:07【问题描述】：我正在使用jquery文件上传(http://blueimp.github.io/jQuery-File-Upload/)插件。我的代码：$(\'#fileupload\').fileupload(url:\'server/index.php\',dat 查看详情
异步上传文件（jquery.form）+进度条+上传到ftp服务器(代码片段)
最近写了一个小项目需要上传文件显示进度条到ftp，总结一下分享我用的是jQuery.form.js上传ftp服务器，自己百度去搭建很简单的Talkischeap.Showmeyourcode. GitHub上面的源码：https://github.com/Vinkong/learngitaspx页面<%@PageLan... 查看详情
文件上传和进度条
...在上传文件时根据读取的文件数量显示进度条。我们如何使用JS和Servlet来实现这一点我知道上传我可以使用apachecommonslib，但如何根据读取的数据显示进度条。我是否应该根据读取的数据量向JS代码发送计数响应，如果可以，如何... 查看详情
文件上传进度条[重复]
...荐一个【问题讨论】：我经常想知道这一点。我之前一直使用Flash解决方案，例如Uploadify。我尝试过使 查看详情
利用formdata对象+xhr新特性实现文件上传——带进度条(代码片段)
小编今天又get到一个新技能，就是上传图片并显示进度条，话不多说，直接进入正题！冲冲冲！！💪实现效果：当点击上传文件按钮后，如果未选择文件，会跳出请选择要上传的文件提示框... 查看详情
vueelement-ui,上传文件加载进度条显示效果(使用定时器实现源码分享）(代码片段)
上传文件效果如图：父组件相关代码html<drag-uploadref=‘mychild‘action="//接口相关地址"v-model="versionwareList"@submitUploadParent=‘formSubmit‘@input=‘delUpload‘:autoUpload="autoUpload":visible="visible":disabled="disabled"/>jshandleSubmit()this.$refs.form.valid... 查看详情
使用 PHP 5.4 中的 session 和 codeigniter 上传进度条
】使用PHP5.4中的session和codeigniter上传进度条【英文标题】：UploadprogressbarusingsessioninPHP5.4withcodeigniter【发布时间】：2015-06-2523:18:51【问题描述】：参考本教程。Trackinguploadprogresswithphp。我想让它在Codeigniter中工作。我没有开始让它... 查看详情
上传多个文件时上传进度(代码片段)
我想上传多个文件（超过1000个文件，总数超过2GB）。在PHP中，我使用函数if(move_uploaded_file($_FILES['files']['tmp_name'][$i],$original_file))$stamp='../contents/wm_watermark.png';$this->create_watermark_photo($original_file,$st 查看详情
记录小文件上传的几个例子（含进度条效果，附源码下载）(代码片段)
1、简单原生上传无javascript脚本、无进度条；借助iframe实现post提交后的无刷新效果；jquery插件ajaxFileUpload.js的实现原型。Html代码<formenctype="multipart/form-data"action="UploadFile_1"method="post"target="frameResult"><divclass="ite 查看详情
如何使用 Apache HttpClient 4 获取文件上传的进度条？
】如何使用ApacheHttpClient4获取文件上传的进度条？【英文标题】：HowtogetaprogressbarforafileuploadwithApacheHttpClient4?【发布时间】：2011-10-2619:20:52【问题描述】：我有以下代码用于使用Apache的HTTP客户端(org.apache.http.client)上传文件：publics... 查看详情