标签: jquery-file-upload

我目前正在使用asp.net mvc 4,并使用jquery-file-upload来上传图片,如果我这样初始化:

        $('#fileupload').fileupload();

        $('#fileupload').fileupload('option', {
            //url: '/Admin/News/Create',
            maxFileSize: 500000000,
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
            maxNumberOfFiles: 1,
            resizeMaxWidth: 1920,
            resizeMaxHeight: 1200,
        });

当选择图像文件时,图像可以在borwser中预览,但在mvc Action Request.Files.Count为0时,表示没有上传文件.如果我这样初始化:

        //$('#fileupload').fileupload();

        $('#fileupload').fileupload('option', {
            //url: '/Admin/News/Create',
            maxFileSize: 500000000,
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
            maxNumberOfFiles: 1,
            resizeMaxWidth: 1920,
            resizeMaxHeight: 1200,
        });

我无法预览图像,但mvc Action获取文件,有谁知道为什么？控制器的邮政编码:

    [HttpPost]
    [ValidateInput(false)]
    public ActionResult Create(NewsViewModel model, FormCollection form)
    {
        if (ModelState.IsValid)
        {
            //....

            // upload image
            foreach (string file in Request.Files)
            {
                HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase;
                if (hpf.ContentLength == 0)
                    continue;
                string path = Path.Combine(Server.MapPath("~/Uploads/News/"),GUID.NewGuid()+ Path.GetExtension(hpf.FileName));
                hpf.SaveAs(path);

                data.ImagePath …

我正在Rails 3.2应用程序中实现jQuery文件上载插件,我收到此错误消息:

Uncaught TypeError: Cannot call method '_adjustMaxNumberOfFiles' of undefined

以下是调用_adjustMaxNumberOfFiles的代码:

$(function () {
    // Initialize the jQuery File Upload widget:
    $('#fileupload').fileupload(
      {
        url: '/photos', // post to and retrieve from
        dataType: 'json'
      }
    );

    // Load existing files:
    $.getJSON($('#fileupload').prop('action'), function (files) {
      var fu = $('#fileupload').data('fileupload'), 
          files = jQuery.grep(files, function (a) { return a.gallery_id == <%= params[:id] %>; }), //filter the photos down to this gallery
          template;


      fu._adjustMaxNumberOfFiles(-files.length);
      template = fu._renderDownload(files).appendTo($('#fileupload .files'));

      // Force reflow:
      fu._reflow = …

我正在将blueimp jquery文件上传器与Amazon S3结合使用.我唯一的问题是我无法根据图片上传的服务器端状态准确更新我的进度条.

我也使用旧版本的PHP(5.3),是否有可用于检索服务器端进度的解决方案或解决方法？

这是我正在调用的jquery:

    var url = 'photos/index.php';

    $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        done: function (e, data) {

            $.each(data.result.files, function (index, file) {
               // display the image preview
            });
        },
        progressall: function (e, data) {

            //console.log(data);
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .bar').css(
                'width',
                progress + '%'
            );
        }
    });

我已经使用php框架实现了jQuery文件上传插件,按照说明相对简单.

https://github.com/blueimp/jQuery-File-Upload

我的问题是专门针对PHP类,当图像上传时,他们上传到我的框架文件夹(执行php脚本).我想知道的是,是否有办法设置上传图像的路径.

这是有问题的课程.

https://github.com/blueimp/jQuery-File-Upload/blob/master/server/php/UploadHandler.php

它包含在jQuery文件上载存储库中.

编辑

使用jQuery文件上载文档,我可以使用MySQL DB中的图片保存数据(参见图1 + 2)

现在我陷入困境的是如何检索数据.上传之后我想用DB中的数据显示图片,但我没有找到如何做到这一点.

如果有人知道如何编辑json附加数据库数据或者我怎么能var_dump它只是为了让我朝着正确的方向推进,这将是非常棒的!我无法找到json的创建位置.json现在看起来像这样:

{"files":[{
    "name"         : "02 (1).jpg",
    "size"         : 12508,
    "type"         : "image\/jpeg",
    "url"          : "http:\/\/localhost:8888\/server\/php\/files\/02%20%281%29.jpg",
    "thumbnailUrl" : "http:\/\/localhost:8888\/server\/php\/files\/thumbnail\/02%20%281%29.jpg",
    "deleteUrl"    : "http:\/\/localhost:8888\/server\/php\/?file=02%20%281%29.jpg",
    "deleteType"   : "DELETE"
}]}

我想这样做:

{"files":[{
    "name"         : "02 (1).jpg",
    "size"         : 12508,
    "type"         : "image\/jpeg",
    "url"          : "http:\/\/localhost:8888\/server\/php\/files\/02%20%281%29.jpg",
    "thumbnailUrl" : "http:\/\/localhost:8888\/server\/php\/files\/thumbnail\/02%20%281%29.jpg",
    "deleteUrl"    : "http:\/\/localhost:8888\/server\/php\/?file=02%20%281%29.jpg",
    "deleteType"   : "DELETE",
    "titleDB"      : "Title1",
    "textDB"       : "Lorem ipsum dolor...."
}]}

我试过(像rAjA解释的那样)并改变了以下内容

require('UploadHandler.php');
$upload_handler = new UploadHandler();
$response_enc = $this->upload_handler->initialize();

但是我收到的错误是"JSON.parse:JSON数据后出现意外的非空白字符",而且我为此找到了googeld,但我找不到任何信息,但没有任何帮助我.

任何人都可以帮我这个或知道我在哪里可以找到信息？谢谢!

我正在使用angular-ui-router来控制我的AngularJS应用程序中的状态.在一个部分我使用jquery-file-upload.我遇到的问题是,当我使用jquery-file-upload给出的示例时,是它在模板中定义控制器,如下所示:

<!-- The file upload form used as target for the file upload widget -->
<form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" 
  enctype="multipart/form-data" data-ng-app="demo" 
  data-ng-controller="DemoFileUploadController" data-file-upload="options" 
  data-ng-class="{'fileupload-processing': processing() || loadingFiles}">
... 
</form>

表单标签有data-ng-controller="DemoFileUploadController".在我的控制器中,这将创建所需的所有文件上载方法(如$scope.submit()和$scope.queue)

问题是我定义了我的控制器angular-ui-router风格,如下所示app.js:

$stateProvider.state('upload', {
  url: "/upload",
  views: {
    "upload": { 
      templateUrl: "app/partials/upload.html", 
      controller: 'DemoFileUploadController' 
    },
  }
})

但是这段代码会导致我的文件上传方法,而不是在我的控制器中加载(或绑定)(没有$scope.submit()和$scope.queue).

有没有办法一起使用angular-ui-router和jquery-file-upload？

我正在尝试为blueimp的jQuery-File-Upload执行错误处理。对于错误的实现很容易，我可以在服务器上捕获将其包装到JSON对象中的错误。但是，如果服务器出现PHP错误并且消息显示为standard-PHP-message，该怎么办？我试图通过失败回调来处理它：

jQuery('#fileupload').fileupload({
    fail: function (ev, data) {
        if (data.jqXHR) {
            alert('Server-error:\n\n' + data.jqXHR.responseText); 
        }
    }, 
    otherOptions
});

它正在工作，但是如果我按取消按钮删除图像，也会触发回调。因此，我添加了if和data.jqXHR来区别服务器错误和按下取消按钮。但是，如果按下取消按钮，则图像不再从列表中删除。

任何想法如何对意外的服务器错误实施此类错误处理？

谢谢，本

我设法用express.js 4.0 设置https://github.com/aguidrevitch/jquery-file-upload-middleware,但是配置它有困难.

这是我的上传脚本:

var upload = require('jquery-file-upload-middleware');
upload.configure({
    imageVersions: {
        thumbs: {
            width: 80,
            height: 80
        },
        prev: {
            width: 1280,
            height: 1024
        }
    }
});

app.use('/admin/upload', function (req, res, next) {
    // imageVersions are taken from upload.configure()
    upload.fileHandler({
        uploadDir: function () {
            return __dirname + '/public/uploads/' + req.session.eventID;
        }
    })(req, res, next);

});

上传Chicken.jpg文件我得到以下结构:

/public/uploads/  -> public uploads folder
    534a8d502e889f8d6bf9cc07/  -> upload session folder
        prev/  -> resized version folder
            Chicken.jpg
        thumbs/    -> another resized version folder …

我正在使用Spring Boot 1.1.3 CommonsMultipartResolver来允许一次上传多个文件.

当我尝试上传大于1 MB的文件时,我得到了这个堆栈跟踪:

Caused by: org.apache.tomcat.util.http.fileupload.FileUploadBase$FileSizeLimitExceededException: 
The field files[] exceeds its maximum permitted size of 1048576 bytes.
    at org.apache.tomcat.util.http.fileupload.FileUploadBase$FileItemIteratorImpl$FileItemStreamImpl$1.raiseError(FileUploadBase.java:637)
    at org.apache.tomcat.util.http.fileupload.util.LimitedInputStream.checkLimit(LimitedInputStream.java:76)
    at org.apache.tomcat.util.http.fileupload.util.LimitedInputStream.read(LimitedInputStream.java:135)
    at java.io.FilterInputStream.read(FilterInputStream.java:107)

我尝试设置这样的最大上传大小:

public MultipartResolver multipartResolver()
{
    CommonsMultipartResolver resolver = new CommonsMultipartResolver();
    resolver.setMaxUploadSize( 100 * MEGABYTE_IN_BYTES );
    return resolver;
}

但是,这不起作用.我已经找到了关于upoading文件的Spring指南,他们在那里使用了MultipartConfigFactory.但是,我现在需要使用MultipartFile该类而不是MultipartHttpServletRequest在我的控制器中.

随着MultipartHttpServletRequest我能做getFileMap()得到的所有文件,但上没有这样的方法MultipartFile.

有关如何使用MultipartConfigFactory和多个文件的任何想法？我在客户端上使用jquery-file-upload,如果这很重要的话.

我正在尝试使用blueimp/jQuery-File-Upload插件以编程方式通过相同的表单发送多个文件输入字段.

当用户选择表单文件时,它只是将它们附加到JS变量中,以便$('#form').fileupload('send')在表单提交时使用方法进一步发送它们.我的目标是以异步方式使用之前使用的完全相同的同步形式.因此,当用户单击表单提交按钮时,它会阻止默认操作,他们让插件执行任务,发送所有表单数据并显示整体上载进度.

我主要关注这些指南:

• https://github.com/blueimp/jQuery-File-Upload/wiki/API
• https://github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Input-Fields-in-One-Form

实际上它几乎正常工作,但它不会向服务器端发送多个输入文件.在fileuploadadd事件我推着data.files[0](我的文件输入只能单一的文件,但他们每个人用不同的accept属性),以"全球" uploadable阵列,然后提交表单我使用类似$('#form').fileupload('send', {files: uploadable}).

我想我没有采用正确的方式,因为只有一个文件与表单数据一起发送.使用单个表单以编程方式发送多个文件输入文件的正确方法是什么？

我对整体上传进度也不太自信...如果我使用fileuploadprogressall事件来阅读上传进度,它会报告所有上传文件的进度吗？

JS(简化)

$(function () {
    var uploadable = [];

    $('#form').fileupload({
        autoUpload: false,
        singleFileUploads: false,
        add: function (event, data) {
            uploadable.push(data.files[0]);

            return false;
        },
        // other event callbacks
    })
        .prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');

    $('#form').submit(function (event) {
        event.preventDefault();

        $('#form').fileupload('send', {files: uploadable});
    });
});

HTML

<form id="form" action="upload" method="post" enctype="multipart/form-data">
  <!-- other text/hidden inputs …