Question

我在.NET C＃4.0 Web应用程序中使用blueimp文件上传控件来上传多张图片。

有几个不同的外部用户使用不同的设备，手机，傻瓜相机或数码单反相机拍照。他们上传图片后我会看一下它们，不同来源的几张照片都是黑色的。文件大小都是＆gt; 0和图像的分辨率是640×480（或480×640，取决于方向）。它的一致性只是因为它们来自同一个人，但他们使用的设备不是一个因素。意思是，如果我有3个人，我正在看到黑色图像，一个可能正在使用iPhone，另一个可能是瞄准和射击，而第三个是任何其他设备。

我正在使用重新调整大小功能并将imageMaxWidth和imageMaxHeight设置为640.我还使用了imageQuality属性。我已经尝试将其设置为0.5,0.8和1.0而没有任何变化。

我注意到的一件事是缩略图都显示正确，这让我觉得调整大小代码有一些东西。

FileUpload.aspx

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv='cache-control' content='no-cache'>
    <meta http-equiv='expires' content='0'>
    <meta http-equiv='pragma' content='no-cache'>

    <title>File Upload</title>

    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="Expires" content="0">

    <script type="text/javascript" src="Scripts/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="Scripts/modernizr-2.8.3.js"></script>
    <script type="text/javascript" src="Scripts/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="Scripts/load-image.all.min.js"></script>
    <script type="text/javascript" src="Scripts/canvas-to-blob.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.iframe-transport.js"></script>
    <script type="text/javascript" src="Scripts/jquery.fileupload.js"></script>
    <script type="text/javascript" src="Scripts/jquery.fileupload-process.js"></script>
    <script type="text/javascript" src="Scripts/jquery.fileupload-image.js"></script>


    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="Content/uploader.css" />
    <link rel="stylesheet" href="Content/jquery.fileupload.css" />
    <link rel="stylesheet" href="Content/jquery.fileupload-ui.css" />
</head>
<body>
    <form id="form1" runat="server">

        <div class="container">

            <span class="btn btn-success fileinput-button">
                <i class="glyphicon glyphicon-plus"></i>
                <span>Select files...</span>

                <input id="file_upload" type="file" name="files[]" multiple="multiple" />
            </span>

            <div id="progress" class="progress">
                <div class="progress-bar progress-bar-success"></div>
            </div>

            <div id="file-upload-progress"></div>

            <label class="message">Press 'Select Files' or Drag your files here to begin uploading.</label>
            <label class="totalfiles"></label>
        </div>

    </form>

    <script type="text/javascript">

        $(document).ready(function () {
            var url = '/ImageUploadHandler.ashx';

            $('#file_upload').fileupload({
                url: url,
                dropZone: $('.container'),
                disableImageResize: false,
                imageMaxWidth: 640,
                imageMaxHeight: 640,
                imageQuality: 0.5,
                imageCrop: false,
                done: function (e, data) {
                    $.each(data.files, function (index, file) {
                        filecounter++;

                        $('.message').text('File upload in progress, please do not close this window...').show();
                        $('.totalfiles').text(filecounter + ' upload completed').show();

                        var progress = Math.floor(filecounter / totalfiles * 100);
                        $('.progress-bar').css('width', progress + '%');

                        if (totalfiles == filecounter) {
                            $('.message').text('File upload complete.');
                            filecounter = 0;
                            totalfiles = 0;
                        }
                    });
                }
            }).bind('fileuploadadd', function (e, data) {
                totalfiles++;

                $('.message').text('');
                $('.totalfiles').text('');
            });
        });

    </script>
</body>
</html>

使用blueimp文件上传控件上传的图片在上传后查看时为黑色

0 个答案: