1

我在使用以下脚本时遇到问题：当用户单击上传按钮并选择它创建的一些图像divs并为每个图像添加一个时。

但是我无法设法tba从其函数中检索变量。我知道这个问题已经被问过好几次了，我尝试了许多不同的方法（包括reader.onload在函数中......）但是我没有成功地检索到那个变量。

<script type="text/javascript">
 $(document).ready(function() {
     function readURL(input) {      
        if (input.files) {
            var tba = '';
            for (var i = 0; i < input.files.length; i++) {
                if(input.files[i]) {

                    var reader = new FileReader();

                    reader.onload = function (e) {
                            tba += '<div class="gallery_image"><img src="'+e.target.result+'" alt="Image currently not accessible" /></div>';
                    };

                    reader.readAsDataURL(input.files[i]);
                }
            }

            $('#gallery_container').html(tba);
        }
    } 
 });
</script>

非常感谢您的帮助，祝您有美好的一天。

4

2 回答 2

0

tba在您的函数范围内可用的变量。要tba在此函数之外访问，请将声明也移到它之外。

  // global
     var tba = '';

     $(document).ready(function() { 
         function readURL(input) {      
            if (input.files) {
                tba = '';

编辑：

由于我的答案的第一部分没有提供所需的帮助，那么tba直接删除并进行 DOM 操作怎么样？

您的函数应如下所示：

<script type="text/javascript">
 $(document).ready(function() {
     function readURL(input) {      
        if (input.files) {
            $('#gallery_container').html(''); //clear the container
            for (var i = 0; i < input.files.length; i++) {
                if(input.files[i]) {

                    var reader = new FileReader();

                    reader.onload = function (e) {
                        // append your generated HTML directly
                        $('#gallery_container').append('<div class="gallery_image"><img src="'+e.target.result+'" alt="Image currently not accessible" /></div>');
                    };

                    reader.readAsDataURL(input.files[i]);
                }
            }
            // removed the dom manipulating part here
        }
    } 
 });
</script>
于 2013-06-27T08:15:56.827 回答
0

如果您在函数外部定义变量，它将从函数中获取值。这称为全局范围，否则它仅在函数范围内可用。

检查这个：

var a = 30;

function foo() {
    a = 25;
}
foo();
alert(a); // will give 25

在这里查看

所以你的代码应该是这样的：

<script type="text/javascript">
 $(document).ready(function() {
     var tba = '';
     function readURL(input) {      
        if (input.files) {
            for (var i = 0; i < input.files.length; i++) {
                if(input.files[i]) {

                    var reader = new FileReader();

                    reader.onload = function (e) {
                            tba += '<div class="gallery_image"><img src="'+e.target.result+'" alt="Image currently not accessible" /></div>';
                    };

                    reader.readAsDataURL(input.files[i]);
                }
            }

            $('#gallery_container').html(tba);
        }
    } 
 });
</script>
于 2013-06-27T08:17:18.710 回答