4

我使用 jquery 在上传时调整图像大小，这很好。但我的问题是我想发送调整大小的图像，并且我想在我的输入文件中设置新图像的数据，以便在提交时将其发送到服务器。但我无法做到这一点。每次发送大文件时。这是我的代码：

    <div>
                    <input name="photo" type="file"/>                     
                    <p><span></span></p>
                    <i></i>
                </div>
                <script>

                    $().ready(function() {


                        $("input[name*='photo']").change(function(e) {
                            var file = e.target.files[0];

                            // RESET
                            $('#area p span').css('width', 0 + "%").html('');
                            $('#area img, #area canvas').remove();


                           // CANVAS RESIZING
                            $.canvasResize(file, {
                                width: 300,
                                height: 0,
                                crop: false,
                                quality: 80,
                                //rotate: 90,
                                callback: function(data, width, height) {

                                    // SHOW AS AN IMAGE


                                    $('<img>').load(function() {

                                        $(this).css({
                                            'margin': '10px auto',
                                            'width': width,
                                            'height': height
                                        }).appendTo('#area div');

                                    }).attr('src', data);

                                    // here i am trying to assign the resized data to my image from my input file


                                    $(this).files[0] = data;

                                }
                            });

                        });
                    });
                </script>

                <script src="jqLibrary/jquery.exif.js"></script>
                <script src="jqLibrary/jquery.canvasResize.js"></script>
                <script src="jqLibrary/canvasResize.js"></script>
            </div>
4

2 回答 2

3

事实上，我使用 filereader 让它工作，然后将数据传递到画布，然后通过 javascritp 远程处理提交，就像我使用 force.com 平台一样。这是代码的一部分：

function uploadFile() {
  var file = document.getElementById('attachmentFile').files[0];
  if(file != undefined) {
  if(file.size <= maxFileSize) {
    attachmentName = file.name;
var fileReader = new FileReader();
fileReader.onloadend = function(e) {
    var tempImg = new Image();
    var dataURL;
    tempImg.src = this.result;
    tempImg.onload = function() {
        var MAX_WIDTH = 400;
        var MAX_HEIGHT = 300;
        var tempW = tempImg.width;
        var tempH = tempImg.height;
        if (tempW > tempH) {
            if (tempW > MAX_WIDTH) {
                 tempH *= MAX_WIDTH / tempW;
                tempW = MAX_WIDTH;
            }
        } else {
        if (tempH > MAX_HEIGHT) {
            tempW *= MAX_HEIGHT / tempH;
            tempH = MAX_HEIGHT;
        }
    }
    var canvas = document.getElementById('myCanvas');
    canvas.width = tempW;
    canvas.height = tempH;
    var ctx = canvas.getContext("2d");
            ctx.drawImage(this, 0, 0, tempW, tempH); 
    attachment = canvas.toDataURL("image/jpeg");                
    attachment = attachment.slice(23);
    positionIndex=0;
    fileSize = attachment.length;
             //this is a function to post the data
    uploadAttachment(null);
         }              
 } 
     fileReader.readAsDataURL(file);

重要的部分是读取的文件类型（readAsDataURL）

于 2013-10-10T06:36:53.077 回答
2

出于安全原因，我们无法将值分配回输入字段，请查看此链接：如何为 HTML 中的文件输入设置值？

于 2013-10-02T10:31:33.460 回答