标签: multifile-uploader

我正在尝试将blueimp文件上传添加到MVC应用程序,并且我在后期操作中接收文件时遇到问题(我正在进行多文件上传功能).有人可以帮我解决这个问题吗？

在我看来,我有以下代码:

<form id="file_upload" enctype="multipart/form-data" action="Home/SaveFile" method="post">    
   <input type="file" name="file" multiple="true"/>
   <button>Upload</button>
   <div>Upload files</div>        
</form>
<br />
###############################
<table id="files">
</table>

<button id="start_uploads">Start uploads</button>
<button id="cancel_uploads">Cancel uploads</button>

blueimp文件上传的JQuery代码如下:

$(document).ready(function () {

        $('#file_upload').fileUploadUI({
            uploadTable: $('#files'),
            downloadTable: $('#files'),
            buildUploadRow: function (files, index) {
                return $('<tr><td class="file_upload_preview"><\/td>' +
                        '<td>' + files[index].name + '<\/td>' +
                        '<td class="file_upload_progress"><div><\/div><\/td>' +
                        '<td class="file_upload_start">' +
                        '<button class="ui-state-default ui-corner-all" title="Start Upload">' +
                        '<span class="ui-icon ui-icon-circle-arrow-e">Start Upload<\/span>' +
                        '<\/button><\/td>' +
                        '<td class="file_upload_cancel">' +
                        '<button class="ui-state-default ui-corner-all" title="Cancel">' + …

我想允许用户在网页上选择本地目录(然后读取目录中的所有文件).

在Chrome中,我可以添加该webkitdirectory属性以启用此功能.根据评论这个问题和回答这个问题,你应该能够用做同样的在Firefox mozdirectory,但我无法得到它的工作.

我在Firefox中试过以下没有运气(适用于Chrome):

 <input type="file" id="files" name="files[]" multiple mozdirectory="" webkitdirectory="" directory="" />

我的Firefox版本是10.0.

有没有办法让用户在Firefox中选择一个输入目录,而无需在客户端添加插件(如Flash)？

我在这里有其他线程中看到的波纹管代码,但实际上它没有显示如何将MultipartFileData文件保存到磁盘.

[HttpPost]
public Task<HttpResponseMessage> PostFormData()
{
    // Check if the request contains multipart/form-data.
    if (!Request.Content.IsMimeMultipartContent())
    {
        throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
    }

    string root = HttpContext.Current.Server.MapPath(Settings.AssetImageTempStorage);
    var provider = new MultipartFormDataStreamProvider(root);

    // Read the form data and return an async task.
    var task = Request.Content.ReadAsMultipartAsync(provider).
        ContinueWith<HttpResponseMessage>(t =>
        {
            if (t.IsFaulted || t.IsCanceled)
            {
                Request.CreateErrorResponse(HttpStatusCode.InternalServerError, t.Exception);
            }

            // This illustrates how to get the file names.
            foreach (MultipartFileData file in provider.FileData)
            {
                // HOW DO I SAVE THIS FILE TO DISK HERE ??? …

我读到HTML5规范引入了在上传表单中选择多个文件的功能.什么浏览器目前支持这个？Adobe AIR是否支持它？

奖金问题:是否有利用此功能的JavaScript库？

我正在使用jQuery多文件上传插件上传多张图片.但表格帖子只有1,顶部,项目.提琴手(POST):

POST /Images/UploadImages HTTP/1.1
Host: localhost:4793
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.6) Gecko/20091201 Firefox/3.5.6
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Referer: http://localhost:4793/images
Cookie: .ASPXAUTH=EFAC4E03FA49056788028048AE1B099D3EB6D1D61AFB8E830C117297471D5689EC52EF40C7FE2CEF98FF6B7C8CAD3AB741A5E78F447AB361A2BDD501331A88C7B75120611CEA4FECA40D972BB9401472
Content-Type: multipart/form-data; boundary=---------------------------1509898581730
Content-Length: 290022

-----------------------------1509898581730
Content-Disposition: form-data; name="album"

1
-----------------------------1509898581730
Content-Disposition: form-data; name="file[]"; filename="Blue hills.jpg"
Content-Type: image/jpeg

...

这是我的代码:

<% using (Html.BeginForm("UploadImages", "Images", FormMethod.Post, new { enctype = "multipart/form-data"}))
       {%>

    <%= Html.DropDownList("album", (IEnumerable<SelectListItem>)ViewData["Albums"])%>
      <br />    
    <input type="file" name="file[]" id="file" class="multi" accept="jpg|png" />
      <br />
     <input type="submit" …

我的控制器中有以下代码：

    public function upload(Request $request)
    {
       $files = $request->file('uploads');
       if(!empty($files)) {
           foreach($files as $file) {
               Storage::put($file-getClientOriginalName(),file_get_contents($file));
        }
    }

通过api.phpin 调用routes：

Route::post('/upload', [ 'uses' => 'UploadController@upload' ]);

我正在使用邮递员来测试我的应用程序。

标头：

身体：

生的：

POST / scotic / public / api / upload HTTP / 1.1主机：127.0.0.1:80内容类型：multipart / form-data; boundary = ---- WebKitFormBoundary7MA4YWxkTrZu0gW缓存控制：无缓存邮递员令牌：0caf7349-5c91-e5f1-766f-72a3f1e33900

------ WebKitFormBoundary7MA4YWxkTrZu0gW内容处置：form-data; name =“ uploads []”; filename =“ banana.png”内容类型：image / png png数据在这里。--WebKitFormBoundary7MA4YWxkTrZu0gW--

该$files是在上传该文件是空的。我究竟做错了什么？

经过一番挖掘后，我使我的上载程序在没有邮递员的情况下工作，我注意到邮递员中缺少“-边界” Content-Type。LHS有效，RHS（邮递员）无效。

有任何想法吗？

https://github.com/blueimp/jQuery-File-Upload 我花了两天时间,没有任何效果.我还从他们的网站下载了这个例子(https://github.com/blueimp/jQuery-File-Upload/wiki/jQuery-File-Upload-6.5-with-CodeIgniter-2.1),但它提供了我能够的语法'修复,因为代码中的一切看起来都很正常,我的编辑器也没有发现任何语法错误......另一方面,示例页面上的代码与它们提供下载的.zip中的代码不同.

原始的演示工作正常,但我无法将其集成到CodeIgniter中,我不知道如何处理我需要的一切.默认情况下,它会加载目录中的所有文件,我不需要它.要在admin中添加产品,列表应该为空,并且文件应该上传到像/pictures/month/filename.ext这样的目录中,并且在上传期间应该创建3种尺寸的缩略图/图片/ th1 /月/ filename.ext对于编辑产品,我需要从数据库中为特定产品加载以前加载的图像,而不是文件夹中的所有图片.最后,删除功能不会删除图像.

我可以看到图像是在没有发送表格的情况下上传的,对吗？这很重要,因为我有10个其他输入字段用于产品详细信息,需要通过发送表单发送并存储在数据库中.除了使用此插件的图片库外,一切都已完成并正常工作.

有人可以帮我解决这个问题吗？

我尝试制作有点像"dropbox"的角度CRUD应用程序.因此,它必须具有共享和访问功能的文件和文件夹托管.我遇到了如何上传图片和视频文件的问题？我使用File API(FileReader,Blob)在客户端进行文件预览,但我不知道如何将这种类型的数据发布到服务器.

我只是在学习node.js,并且很难使用express和multer进行简单的文件上传.

这是表格:

在我的configure.js身上:

app.use(express.static(path.join(__dirname, 'public')));
app.use(multer({dest:'../public/upload/temp'}).single('file'));

和image.js控制器:

create: function(req, res) {
        var saveImage = function() {
            console.log(req.body);
            var possible = 'abcdefghijklmnopqrstuvwxyz0123456789',
                imgUrl = '';

            for(var i=0; i < 6; i+=1) {
                imgUrl += possible.charAt(Math.floor(Math.random() * possible.length));
            }

            var tempPath = req.files.file.path, //<line 55 error
                ext = path.extname(req.files.file.name).toLowerCase(),
                targetPath = path.resolve('./public/upload/' + imgUrl + ext);

            if (ext === '.png' || ext === '.jpg' || ext === '.jpeg' || ext === '.gif') {


                fs.rename(tempPath, targetPath, …

我们使用 OpenAPI 3.0.0 架构构建 API，并生成用于应用程序前端部分的打字稿代码。我们定义了一个端点，它应该能够使用多个文件并将它们上传到后端。这是端点的 requestbody 的样子：

requestBody:
  content:
    multipart/form-data:
      schema:
        properties:
          images:
            type: array
            items:
              type: string
              format: binary
        required:
          - images

在有关文件上传的 OpenAPI 网页以及 Stackoverflow 上的多个帖子中也找到了类似的定义。

生成 API 时，images预计类型为Array<Blob>。当文件输入元素的输入在前端发生更改时，将调用端点。更具体地说，端点的调用方式如下：

const onInputChange = useCallback(() => {
  const files = inputRef.current.files; // React.useRef that's passed in as ref for the html input-element
  uploadImages(Array.from(files)); // uploadImages is the function that calls the endpoint
}, [inputRef, api]);

在这种情况下，API 验证始终返回状态代码为 400 - 错误请求的 HTTP 响应。查看 OpenAPI 生成器生成的实现，-propertyimages …