我通过jquery-fileupload-rails gem 在Rails 3.2应用程序中使用blueimp jquery-file-upload.
我正在尝试在上传之前在客户端调整图像大小,但是在访问文档时遇到了问题.我的代码如下.目前上传效果很好,但图片没有调整大小.
通过jquery-file-upload调整图像大小的正确语法是什么.
(基于此和本文档的coffeescript中显示了两种方法.对我来说都不适用.)
#Coffeescript
jQuery ->
if $("#new_asset").length
$("#new_asset").fileupload
dataType: "script"
add: (e, data) ->
types = /(\.|\/)(jpe?g|png)$/i
file = data.files[0]
if types.test(file.type) || types.test(file.name)
data.context = $(tmpl("template-upload", file))
$('#progress-container').append(data.context)
jqXHR = data.submit()
$("button.cancel").click (e) ->
jqXHR.abort()
else
alert("#{file.name} is not a jpeg or png image file")
progress: (e, data) ->
if data.context
progress = parseInt(data.loaded / data.total * 100, 10)
data.context.find('.bar').css('width', progress + '%')
stop: (e, data) …Run Code Online (Sandbox Code Playgroud) ruby-on-rails blueimp jquery-file-upload jquery-fileupload-rails
我开始使用优秀的 http://blueimp.github.io/jQuery-File-Upload/文件上传项目.
从文档的文件处理选项部分看来,jquery.fileupload-process.js似乎可以解析甚至修改文件的二进制数据(文件数组 - 应用了进程的结果,原始文件包含原始上传的文件)
(解析,附加或加密或对其做某事)
但对于我的生活,我似乎无法弄清楚数组中的实际文件数据在哪里,以便我可以在上传之前对其进行预处理.
数据数组的哪一部分有"something.pdf"二进制文件?这样我才能在上传之前解析并转换它?
//FROM: jquery.fileupload-process.js
//The list of processing actions:
processQueue: [
{
action: 'log'
}
],
add: function (e, data) {
var $this = $(this);
data.process(function () {
return $this.fileupload('process', data);
});
originalAdd.call(this, e, data);
}
},
processActions: {
log: function (data, options) {
console.log(data.files[0]); //Is it here?
console.log(data); //Is it here?
console.log(data.files[data.index]); //Is it here?
console.log(data.files[data.index].name); //Is it here?
//where?
Run Code Online (Sandbox Code Playgroud)
谢谢.
我正在使用 Blueimp ( http://blueimp.github.io/jQuery-File-Upload/ )上传的 jquery jQuery 文件,我有一个问题:
我使用这个插件让用户能够在 web 目录上加载文件,但重要的是任何用户都可以看到或删除现有文件。如何隐藏现有文件?
这是我的页面:http : //www.sgagrafica.com/file_uploader2/
瑞加兹马可
我正在尝试使用laravel应用程序实现blueimp jquery文件上传.https://github.com/blueimp/jQuery-File-Upload
我已经使用插件设置了正常工作和表现的表单,但是我在使用laravel创建服务器端脚本以处理上载时遇到了问题.
我已将表单操作更改为:
<form id="fileupload" action="{{ route('photos.post.upload') }}" method="POST"
enctype="multipart/form-data">
Run Code Online (Sandbox Code Playgroud)
在main.js(插件的一部分)我已将url设置为:
$('#fileupload').fileupload({
// Uncomment the following to send cross-domain cookies:
//xhrFields: {withCredentials: true},
url: '/photos/upload/'
});
Run Code Online (Sandbox Code Playgroud)
在我的路线文件中,我创建了一条路线,如下所示:
Route::any('photos/upload', [
'as'=>'photos.post.upload',
'uses' => 'PhotosController@uploadImage'
]);
Run Code Online (Sandbox Code Playgroud)
我在控制器中的功能:
public function uploadImage()
{
dd(Input::file());
return Response::json(
array(
"files" => array(
"name" => "post"
))
);
}
Run Code Online (Sandbox Code Playgroud)
此时我只想测试收到的表单数据.但是在上传时数据为空.
无论是使用Route::any()还是Route::post()却得到了一个301错误(永久移动)
检查谷歌浏览器它出现POST正在按预期用于上传,看起来像包含文件.
所以.
Input::file() 返回空任何帮助赞赏
这是我的表格(基本上传):
<span class="btn btn-success fileinput-button">
<span>Select files...</span>
<input id="fileupload" type="file" name="files[]" multiple>
</span>
<br>
<div id="files" class="files"></div>
Run Code Online (Sandbox Code Playgroud)
这是我的脚本:
$(function () {
$('#fileupload').fileupload({
url: 'server/php/',
dataType: 'json',
add: function (e, data) {
data.context = $('<p/>').text('Uploading...').appendTo('#files');
data.submit();
},
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').html('<a href="#" class="text-danger delete" data-type="' + file.deleteType + '" data-url="' + file.deleteUrl + '" title="Delete">Delete</a>').appendTo('#files');
});
}
});
});
Run Code Online (Sandbox Code Playgroud)
我的上传没问题但是当我点击DELETE链接时,没有任何反应.看来这个链接没有效果.也许我错过了包含的东西?
任何的想法 ?
我正在使用 Ajax 文件上传功能和模式中的状态栏。该代码运行良好。但是,当用户单击取消按钮(上传时)时,模式关闭,但文件正在后台上传到服务器。
我尝试了xhr.abort();取消上传的功能。但这不起作用。如何在用户单击取消按钮时停止文件上传过程。
我正在使用jquery 1.10.2版本。
$(function () {
$('#showonlyvalue-portvid').hide();
$('#btnuploadvideo').click(function () {
if (jQuery("#verifyvideo-file").valid()) {
$('.myprogress').css('width', '0');
$('.successmsgfile-video').text('');
var formData = new FormData();
formData.append('portfoliovideos', $('input[name=portfoliovideos]')[0].files[0]);
$('#showonlyvalue-portvid').show();
$('#btnuploadvideo').attr('disabled', 'disabled');
$('.successmsgfile-video').text('Uploading in progress...');
$.ajax({
url: "<?php echo base_url(); ?>profile/port_videoone"
, data: formData
, processData: false
, contentType: false
, type: 'POST' // this part is progress bar
, xhr: function () {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = …Run Code Online (Sandbox Code Playgroud) 正在使用jquery 文件上传插件直接上传到 s3,我试图在上传之前压缩图像,我已经尝试了该选项imageQuality: 0.8
fileInput.fileupload({
fileInput: fileInput,
url: my_url
type: 'POST',
paramName: 'file',
dataType: 'XML',
replaceFileInput: false,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
maxFileSize: 999000,
imageQuality: 0.8,
// .....
})
Run Code Online (Sandbox Code Playgroud)
但是上传后图像大小不会被压缩
我不确定这imageQuality是正确的事情,但我也愿意接受任何其他选择:
例如:我还创建了自己的函数来压缩图像,该函数返回图像 Blob,我只是不知道如何告诉JQuery 文件上传使用该 Blob 而不是输入文件中的图像
我需要帮助通过客户端jQuery上传表单向亚马逊提供内容类型.我需要添加内容类型,因为我上传的音频文件不会在jPlayer中播放ie10除非内容类型设置正确.我使用了pjambet的博客文章 - http://pjambet.github.io/blog/direct-upload-to-s3/来启动和运行(优秀的文章顺便说一句).看来,字段的顺序非常重要.我一直试图插入一个隐藏的输入标签,或者说是相关的内容类型(我认为是音频/ mpeg3),或者是空白,以便我的上传脚本填充.没运气.添加额外字段时上传会挂起.
直接上载form.html.erb
<form accept-charset="UTF-8" action="http://my_bucket.s3.amazonaws.com" class="direct-upload" enctype="multipart/form-data" method="post"><div style="margin:0;padding:0;display:inline"></div>
<%= hidden_field_tag :key, "${filename}" %>
<%= hidden_field_tag "AWSAccessKeyId", ENV['AWS_ACCESS_KEY_ID'] %>
<%= hidden_field_tag :acl, 'public-read' %>
<%= hidden_field_tag :policy %>
<%= hidden_field_tag :signature %>
<%= hidden_field_tag :success_action_status, "201" %>
<%= file_field_tag :file %>
<div class="row-fluid">
<div class="progress hide span8">
<div class="bar"></div>
</div>
</div>
</form>
Run Code Online (Sandbox Code Playgroud)
音频upload.js
$(function() {
$('input[type="submit"]').attr("disabled","true");
$('input[type="submit"]').val("Please upload audio first");
if($('#demo_audio').val() != ''){
var filename = $('#demo_audio').val().split('/').pop().split('%2F').pop();
$('#file_status').removeClass('label-info').addClass('label-success').html(filename + ' upload complete');
}
$('.direct-upload').each(function() {
var …Run Code Online (Sandbox Code Playgroud) 我正在使用Blueimp fileupload()将图像文件发布到django-tastypie API.
在上传文件时,以下代码可正常工作:
$("#image").fileupload({
dataType: 'json',
start: function() {
console.log("start fileupload");
},
progress: function(e, data) {
console.log(data.loaded + " " + data.total);
},
beforeSend: function(xhr, settings) {
xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));
},
done: function(e, data) {
console.log("done uploading file.");
}
});
$("#image").bind('fileuploadfinished', function (e, data) {
console.log("fileuploadfinished");
});
Run Code Online (Sandbox Code Playgroud)
但是,done永远不会调用回调.我尝试绑定fileuploadfinished,也从未调用过.
start并且progress都按预期调用.
beforeSend没有文档,但django-tastypie需要SessionAuthentication- 删除它不会改变它done,fileuploadfinished也永远不会被调用.
有没有办法在JSP + java中使用jQuery上传multipart文件.在jQuery AJAX中执行时出错.
$.ajax({
type: "POST",
url: "${pageContext.request.contextPath}/users/imageUpload/" + $imageUpload + "/" + $userId??,
contentType: "multipart/form-data",
processData: false,
}).done(function(data) {}).fail(function(data) {
alert("Ooopss..! Something Bad Happened.!");
});
Run Code Online (Sandbox Code Playgroud)