Question

我正在尝试使用bootstrap-fileupload plugin在客户端上传某些图像文件的转换版本以用于自定义视图。在我的搜索中，我提出了this问题，并且几乎想出了如何使用ASP.NET自定义标记上传文件。

现在我要做的是在上传之前调整该图像文件的大小（因为某些图像文件可能> 15MP - 相当于每个文件大于5MB）到服务器。每个人都在谈论Plupload，但是它有自己的设计界面，默认情况下创建允许多个文件。我想要使用的是调整单个文件的大小，并通过单击按钮将其上传到服务器。

我正在避免使用Flash，Silverlight以及类似这些需要在计算机上安装某些东西以便使用它的东西。我更喜欢基于HTML5的解决方案，因为我的用户没有使用任何古老的浏览器，如IE8，IE9等。

我正在使用ASP.NET 4.5，使用所有最新版本的插件和脚本。由于这是一个新项目，我愿意添加，修改任何必要的内容以实现我的目标。

感谢您阅读我的问题并做出贡献。

干杯！

编辑：我们在这里添加一些代码。

HTML

<input type="file" class="default" id="ctrl_Upload" runat="server" accept="image/*" onchange="resizeImage(this)" />
<br />
<asp:Button runat="server" ID="btn_Upload" Text="Upload" OnClick="btn_Upload_Click" />

JS

function resizeImage(input) {
    var filesToUpload = input.files;
    var file = filesToUpload[0];

    var img = document.createElement("img");
    var reader = new FileReader();
    reader.onload = function (e) { img.src = e.target.result }
    reader.readAsDataURL(file);

// reader returns null (actually, "e" is returning null here)

    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    var MAX_WIDTH = 80;
    var MAX_HEIGHT = 60;
    var width = img.width;
    var height = img.height;

    if (width > height) {
        if (width > MAX_WIDTH) {
            height *= MAX_WIDTH / width;
            width = MAX_WIDTH;
        }
    } else {
        if (height > MAX_HEIGHT) {
            width *= MAX_HEIGHT / height;
            height = MAX_HEIGHT;
        }
    }
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, width, height);

    var dataurl = canvas.toDataURL("image/png");
    img.src = dataurl;
}

CS

    protected void btn_Upload_Click(object sender, EventArgs e)
    {
        if (ctrl_Upload.PostedFile != null)
        {
            // File was sent
            var postedFile = ctrl_Upload.PostedFile;
            int dataLength = postedFile.ContentLength;
            byte[] myData = new byte[dataLength];
            postedFile.InputStream.Read(myData, 0, dataLength);

            postedFile.SaveAs(Server.MapPath("/Uploads/image01.jpg"));

        }
        else
        {
            // No file was sent

        }
    }

这就是我掌握的全部内容。无法弄清楚如何使用文件输入的选定文件信息正确创建画布。然后我需要重新创建图像，并使用此

将其发送回文件输入

var dataurl = canvas.toDataURL("image/png");

我猜......

任何想法如何解决这个问题？

调整图像大小，然后使用bootstrap-fileupload插件将其上传到服务器

0 个答案: