0

我有一个从文件选择框的 onChange 事件调用的 javascript 函数。

function cropper(){}

当我试图从文件选择的 onchange 事件中调用此函数时，它不起作用。我这样称呼它

<label>Upload Photo:</label>
<input type="file" id="image_file" name="picture1" onchange="cropper()"/><br>

如果我将函数的定义更改为如下所示，则它可以工作。

$(document).ready(function(){
$(#image_file).change(function(){
    });
});

谁能帮助我如何使用第一种方法来实现它。提前致谢。

JSFiddle 链接：

http://jsfiddle.net/ashishtyagi10/M5sqK/

4

1 回答 1

0

这里的问题很少

  1. 有一个语法错误cropper没有正确关闭。}函数末尾有一个缺失
  2. 未启用 jQuery UI
  3. 您的代码在load处理程序中，这意味着cropper它不是全局方法。您需要选择无包裹体

尝试

var selectImgWidth, selectImgHeight, jcrop_api, boundx, boundy, isError = false;
function cropper() {
    var previewId = document.getElementById('load_img');
    var thumbId = document.getElementById('thumb');
    previewId.src = '';
    $('#image_div').hide();
    var flag = 0;

    // Get selected file parameters
    var selectedImg = $('#image_file')[0].files[0];

    //Check the select file is JPG,PNG or GIF image
    var regex = /^(image\/jpeg|image\/png)$/i;
    if (!regex.test(selectedImg.type)) {
        $('.error').html('Please select a valid image file (jpg and png are allowed)').fadeIn(500);
        flag++;
        isError = true;
    }

    if (flag === 0) {
        isError = false;
        $('.error').hide(); //if file is correct then hide the error message


        // Preview the selected image with object of HTML5 FileReader class
        // Make the HTML5 FileReader Object
        var oReader = new FileReader();
        oReader.onload = function (e) {

            // e.target.result is the DataURL (temporary source of the image)
            thumbId.src = previewId.src = e.target.result;

            // FileReader onload event handler
            previewId.onload = function () {
                $("#dialog").dialog("open"); //--> this is where dialog box is opened
                // display the image with fading effect
                $('#image_div').fadeIn(500);
                selectImgWidth = previewId.naturalWidth; //set the global image width
                selectImgHeight = previewId.naturalHeight; //set the global image height

                // Create variables (in this scope) to hold the Jcrop API and image size

                // destroy Jcrop if it is already existed
                if (typeof jcrop_api !== 'undefined') jcrop_api.destroy();

                // initialize Jcrop Plugin on the selected image
                $('#load_img').Jcrop({
                    minSize: [32, 32], // min crop size
                    // aspectRatio : 1, // keep aspect ratio 1:1
                    bgFade: true, // use fade effect
                    bgOpacity: .3, // fade opacity
                    onChange: showThumbnail,
                    onSelect: showThumbnail
                }, function () {

                    // use the Jcrop API to get the real image size
                    var bounds = this.getBounds();
                    boundx = bounds[0];
                    boundy = bounds[1];

                    // Store the Jcrop API in the jcrop_api variable
                    jcrop_api = this;
                });
            };
        };

        // read selected file as DataURL
        oReader.readAsDataURL(selectedImg);
    }
}    

function showThumbnail(e) {
    var rx = 155 / e.w; //155 is the width of outer div of your profile pic
    var ry = 190 / e.h; //190 is the height of outer div of your profile pic
    $('#w').val(e.w);
    $('#h').val(e.h);
    $('#w1').val(e.w);
    $('#h1').val(e.h);
    $('#x1').val(e.x);
    $('#y1').val(e.y);
    $('#x2').val(e.x2);
    $('#y2').val(e.y2);
    $('#thumb').css({
        width: Math.round(rx * selectImgWidth) + 'px',
        height: Math.round(ry * selectImgHeight) + 'px',
        marginLeft: '-' + Math.round(rx * e.x) + 'px',
        marginTop: '-' + Math.round(ry * e.y) + 'px'
    });
}


function validateForm() {
    if ($('#image_file').val() === '') {
        $('.error').html('Please select an image').fadeIn(500);
        return false;
    } else if (isError) {
        return false;
    } else {
        return true;
    }
}


$(function () {
    $("#dialog").dialog({
        dialogClass: 'DynamicDialogStyle',
        autoOpen: false,
        modal: true,
        width: $(window).width()-20,
        height: $(window).height()-10,
        position: 'center',
        buttons: {
        "Uploads": function () {
        $(this).dialog("close");
    },
                        "Cancel": function () {
        $(this).dialog("close");
    }
}
  });
});



function botype(a) {
    if (a.options[a.selectedIndex].value === '1') {
        document.getElementById('showme').style.display = 'inline-block';
    }
    else {
        document.getElementById('showme').style.display = 'none';
    }
}

演示：小提琴

于 2013-06-01T04:06:57.893 回答