Question

我正在使用blueimp文件上传控件上传多张高分辨率照片（每张3mb-10mb）。该站点是一个MVC 5应用程序，具有Azure Web应用程序和blob存储后端。我已经增加了文件大小限制以考虑更大的图像。

以下代码适用于PC上的任何浏览器....但总是在mac上为safari返回500内部服务器错误。不幸的是，我没有带有提琴手的mac来获取更详细的信息。

控件在引导模式窗口内运行，代码如下。

@using (Html.BeginForm("UploadPhoto", "PhotographerPortal", FormMethod.Post, new {id= "UploadPhoto", enctype = "multipart/form-data" }))
{
    // Pass in the booking Id
    @Html.HiddenFor(model => model.BookingsId)

    <div class="form-group">
        <label for="phototype" class="control-label"><strong>Select Photo Type:</strong></label>
        <select class="form-control" id="phototype" name="phototype">
            <option value="SamplePhoto">Sample Photo</option>
            <option value="GalleryPhoto">Gallery Photo</option>
        </select>
    </div>

    <div class="fileupload-buttonbar">
        <div class="btn-group">
            <span class="btn btn-success fileinput-button">
                <i class="glyphicon glyphicon-plus"></i>
                <span>Add files...</span>
                <input type="file" name="files[]" multiple />
            </span>
            <button type="submit" class="btn btn-primary start">
                <i class="glyphicon glyphicon-upload"></i>
                <span>Start upload</span>
            </button>

        </div>

        <span class="fileupload-process"></span>
        <div class="fileupload-progress fade">
            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                <div class="progress-bar progress-bar-success" style="width:0%;"></div>
            </div>
            <div class="progress-extended">&nbsp;</div>
        </div>
    </div>
    <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
}

使用以下脚本启动BlueImp控件。

<script type="text/javascript">
    $('#UploadPhoto').fileupload({url: '/PhotographerPortal/UploadPhoto/'});

    $('#UploadPhoto').fileupload('option', {
        dropZone: $('#PhotoUpload'),
        maxFileSize: 10000000,
        sequentialUploads: true,
        disableImagePreview: false,
        resizeMaxWidth: 1920,
        resizeMaxHeight: 1200,
    });
</script>

MVC控制器。

[HttpPost]
public ActionResult UploadPhoto(int BookingsId, string phototype) // optionally receive values specified with Html helper
{

    ApplicationUser user = db.Users.Where(u => u.UserName == User.Identity.Name).FirstOrDefault();

    var statuses = new List<PhotoUploadResponse>();
    for (var i = 0; i < Request.Files.Count; i++)
    {
        PhotoUploadResponse uploadFileResult = new PhotoUploadResponse();

        // Call to upload the photo to Azure and the Photo DB
        var uploadResponse = CommonMethods.UploadPhotos(Request.Files[i], user, BookingsId, phototype);

        uploadFileResult.SavedFileName = uploadResponse.BlobName;
        uploadFileResult.name = uploadResponse.Name;
        uploadFileResult.size = uploadResponse.Size;

        if (uploadFileResult.error != null)
        {
            uploadFileResult.error = uploadResponse.Error;
        }
        else
        {
            uploadFileResult.url = uploadResponse.Url;
            uploadFileResult.thumbnailUrl = uploadResponse.thumbnailUrl;
        }
        statuses.Add(uploadFileResult);
    }

    var viewresult = Json(new { files = statuses });

    //for IE8 which does not accept application/json
    if (Request.Headers["Accept"] != null && !Request.Headers["Accept"].Contains("application/json"))
        viewresult.ContentType = "text/plain";

    return viewresult;
}

Fiddler在PC上跟踪了以下信息。

非常感谢任何帮助。

Answer 1

好吧，我认为我拥有它 - 至少，它现在正在为我工作。我删除了imageMaxWidth和imageMaxHeight的设置，并将disableImageResize设置为true，它似乎解决了问题。我最好的猜测是关于调整大小算法的东西在Safari上有点不可靠......

仅限Safari上的内部服务器错误 - Blueimp文件上传

1 个答案: