使用 HTML 输出标签查看可缩放图像并分配 src

Question

我有以下代码，其中 returns 使用来自 HTML 的输出属性的图像。我希望能够 scale/edit 此图像具有最大宽度和最大高度。我也想给这个图片分配一个 SRC。

我的HTML:

<input type="file" id="files" name="files[]" file-model="myFile"/>
  <output id="list" class="resize-image" alt="Image"></output>

我的 JS：

  var handleFileSelect = function (evt) {//already set up for multiple files; not what i want to do.
            var files = evt.target.files; // FileList object

            // Loop through the FileList and render image files as thumbnails.
            for (var i = 0, f; f = files[i]; i++) {

                // Only process image files.
                if (!f.type.match('image.*')) {
                    continue;
                }

                var reader = new FileReader();

                // Closure to capture the file information.
                reader.onload = (function(theFile) {
                    return function(e) {
                        // Render thumbnail.
                        var span = document.createElement('span');
                        span.innerHTML = ['<img height="35" width="75" class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');
                        document.getElementById('list').insertBefore(span, null);
                    };
                })(f);

                // Read in the image file as a data URL.
                reader.readAsDataURL(f);
            }
        }

        document.getElementById('files').addEventListener('change', handleFileSelect, false);

Answer 1

所以如果你真的想在这种情况下使用 css 属性，你必须使用 style 属性

内联注入它们

 var span = document.createElement('span');
        span.innerHTML = ['<img height="35" width="75" class="thumb" src="',
        e.target.result,
        'style="max-height:25px; max-width:25px;"', // You can manipulate that dynamically using 
        '" title="',
        escape(theFile.name),
        '"/>'].join('');
        document.getElementById('list').insertBefore(span, null);
    };

检查动态 css 操作：http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_css_setcolor

Answer 2

为什么不在 css 中添加 .thumb{max-height:35px;max-width:75px;}，当您创建新元素时设置 class 属性，css 将应用于该元素。另外，为什么要创建跨度然后将 innerHTML 设置为图像？为什么不直接创建图像？

CSS

.thumb{max-height:35px;max-width:75px;}

创建图像

var Img = document.createElement('img');
// .setAttribute(AttributeType, Attribute Value);
Img.setAttribute('class','thumb'); //Class Attribute
Img.setAttribute('src',e.target.result);//Src Attribute
document.getElementById('list').insertBefore(Img, null);

希望对您有所帮助。编码愉快！

使用 HTML 输出标签查看可缩放图像并分配 src

Working with HTML output tag to view scalable image and assign src

html

javascript

css

attributes