标签: jquery-file-upload

如何使用jquery文件上传调整客户端图像的大小

我通过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

2
推荐指数
1
解决办法
5011
查看次数

jQuery-File-Upload预处理时文件数据在哪里?http://blueimp.github.io/jQuery-File-Upload/

我开始使用优秀的 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)

谢谢.

javascript jquery blueimp jquery-file-upload

2
推荐指数
1
解决办法
2397
查看次数

Blueimp 上传 jQuery 文件:隐藏现有文件

我正在使用 Blueimp ( http://blueimp.github.io/jQuery-File-Upload/ )上传的 jquery jQuery 文件,我有一个问题:

我使用这个插件让用户能够在 web 目录上加载文件,但重要的是任何用户都可以看到或删除现有文件。如何隐藏现有文件?

这是我的页面:http : //www.sgagrafica.com/file_uploader2/

瑞加兹马可

jquery jquery-file-upload

2
推荐指数
1
解决办法
721
查看次数

bootstrap jquery文件上传和laravel

我正在尝试使用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正在按预期用于上传,看起来像包含文件.

所以.

  1. 为什么我得到301错误 - 我在javascript方面缺少什么
  2. 为什么Input::file() 返回空

任何帮助赞赏

javascript php laravel blueimp jquery-file-upload

2
推荐指数
1
解决办法
3118
查看次数

Blueimp文件上传:我的DELETE链接不起作用

这是我的表格(基本上传):

<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链接时,没有任何反应.看来这个链接没有效果.也许我错过了包含的东西?

任何的想法 ?

jquery blueimp jquery-file-upload

2
推荐指数
1
解决办法
6872
查看次数

如何取消/中止 jQuery AJAX 文件上传

我正在使用 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)

javascript ajax jquery file-upload jquery-file-upload

2
推荐指数
1
解决办法
5614
查看次数

使用jquery文件上传在上传之前压缩图像

正在使用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 jquery-file-upload

2
推荐指数
1
解决办法
4646
查看次数

使用jQuery文件上载在S3中设置文件内容类型

我需要帮助通过客户端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)

ruby-on-rails amazon-s3 jquery-file-upload

1
推荐指数
1
解决办法
3450
查看次数

没有调用Blueimp fileupload()回调

我正在使用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也永远不会被调用.

file-upload blueimp jquery-file-upload

1
推荐指数
1
解决办法
3689
查看次数

使用jQuery上传多部分文件

有没有办法在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)

ajax jquery jquery-file-upload

1
推荐指数
1
解决办法
5769
查看次数