添加ajax jQuery文件上传
Adding ajax jQuery File upload
因此,我有以下图像上传表单:
HTML:
<form name="upload_image">
<input id="fileupload" type="file" name="files[]" class="files rhiu" onchange="UploadImage(event);" accept='image/*'/>
<div id="progress">
<div class="bar" style="width: 0%;"></div>
</div>
<ul id="fileList">
<!-- The file list will be shown here -->
</ul>
</form>
PHP:
add_action( 'wp_ajax_UploadImage', 'UploadImage' );
add_action( 'wp_ajax_nopriv_UploadImage', 'UploadImage' );
function UploadImage()
{
$upload_dir = wp_upload_dir();
$files = $_FILES['files'];
foreach ($files['name'] as $key => $value) {
...ADDING IMAGE TO A POST...
}
}
echo json_encode($image_path);
exit;
}
JS:
function UploadImage(e)
{
var form = document.forms.namedItem("upload_image");
var formdata = new FormData(form);
formdata.append('action', 'UploadImage');
jQuery.ajax({
type: "POST",
dataType: "json",
url: upload_image.ajax_url,
data: formdata,
contentType: false,
processData: false,
success: function(data) {
alert('Success');
}
});
}
到目前为止,一切都很好。
但我正在尝试实现Bluimp jQuery File上传,作为这里选择答案后的上传处理程序。
我很难使用ajax选项。
所以我要做的是:
- 使用blueimpjQuery上传文件上传图片
- 数据是通过ajax功能("UploadImage")添加的
我需要在js中做什么更改才能包含插件?
我尝试了什么:
var form = document.forms.namedItem("upload_video");
var formdata = new FormData(form);
formdata.append('action', 'UploadImage');
$('#fileupload').fileupload({
type: "POST",
dataType: "json",
url: upload_image.ajax_url,
data: formdata,
add: function (e, data) {
var tpl = $('<li class="working">'+
'<input type="text" value="0" data-width="48" data-height="48" data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" />'+
'<p></p><span></span></li>' );
tpl.find('p')
.text(data.files[0].name)
.append('<i>' + formatFileSize(data.files[0].size) + '</i>');
data.context = tpl.appendTo(ul);
tpl.find('span')
.click(function() {
if (tpl.hasClass('working')) {
jqXHR.abort();
}
tpl.fadeOut(function(){
tpl.remove();
});
});
var jqXHR = data.submit();
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css(
'width',
progress + '%'
);
}
});
我首先注意到的是HTML
Need to make form multi-part for image uploading
相关文章:
- 删除表,但不删除表单和文件 jQuery
- Ruby on Rails:“找不到文件'jquery.ui.datepicker'”
- 从 html 页面调用文件 jQuery 文件
- Javascript 文件修改了未从中调用它的 html 文件?Jquery 选择器
- 未呈现Javascript文件/Jquery
- 上传文件jQuery ajax MVC
- 我在哪里可以得到这个文件jquery.min.js
- 使用委托点击按钮下载文件JQuery
- 找不到文件“jquery-ui”
- JavaScript文件(jQuery步骤)未在Google Chrome中加载
- 自动内联CSS从CSS文件(jquery?ajax吗?php ?)
- 如何使用本地json文件jquery或angularjs实现文本框的自动完成
- 在JSPX文件中包含JS文件(JQuery)
- 如何将变量值从后面的代码传递到外部JavaScript文件(jQuery文件)
- 如何获得扩展图像文件jquery.filer
- 检测设备和交换CSS文件- jQuery
- 警报文本从文件JQuery / javascript
- 如何排序日期和字符串在同一列在jquery插件有文件jquery. datatable .js
- 移动谷歌地图api代码到单独的文件+ jquery
- 获取按钮id从js文件和使用在另一个js文件- jquery