与HTML输出标记工作，查看可扩展的图像，并分配SRC [英] Working with HTML output tag to view scalable image and assign src

问题描述

我有以下的code，利用HTML的输出属性，它返回的图像。我希望能够扩展/编辑带最大宽度和最大高度此图像。我也想转让本图像的SRC。

我的HTML：

 ＆LT;输入类型=文件ID =文件NAME =文件[]文件模式=MYFILE/＆GT;
  ＆LT;输出ID =清单级=调整图像ALT =图片＆GT;＆LT; /输出GT;
 

我的JS：

  VAR handleFileSelect =功能（EVT）{//已经建立了多个文件;不是我想做的事情。
            var中的文件= evt.target.files; //文件列表对象            //循环遍历文件列表和渲染图像文件为缩略图。
            对于（VAR I = 0，F; F =文件[i];我++）{                //只处理图像文件。
                如果（！f.type.match（'形象。*））{
                    继续;
                }                VAR读卡器=新的FileReader（）;                //关闭捕获文件的信息。
                reader.onload =（函数（theFile）{
                    复位功能（E）{
                        //渲染缩略图。
                        VAR跨度=使用document.createElement（'跨'）;
                        span.innerHTML = ['＆LT; IMG高度=35WIDTH =75级=拇指SRC =，e.target.result，
                            '称号=，逃逸（theFile.name），'/＆GT;']加入（''）;
                        。的document.getElementById（'名单'）的insertBefore（跨度，NULL）;
                    };
                }）（F）;                //读取图像文件作为数据URL英寸
                reader.readAsDataURL（F）;
            }
        }        的document.getElementById（'文件'）的addEventListener（'变'，handleFileSelect，假的）。
 

解决方案

所以，如果你真的想在这种情况下使用 CSS 属性，你必须内嵌注入它们使用风格属性

  VAR跨度=使用document.createElement（'跨'）;
        span.innerHTML = ['＆LT; IMG高度=35WIDTH =75级=拇指SRC =，
        e.target.result，
        风格=最大高度：25像素;最大宽度：25像素;'，//可以动态使用该操作
        '称号=，
        逃生（theFile.name）
        '/＆GT;']加入（''）。
        。的document.getElementById（'名单'）的insertBefore（跨度，NULL）;
    };
 

勾选此动态CSS操作： http://www.w3schools.com /jquery/tryit.asp?filename=tryjquery_css_setcolor

I have the following code, which returns an image using the output attribute from HTML. I want to be able to scale/edit this image with max-width and max-height. I also want to assign this image an SRC.

My HTML:

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

My 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);

解决方案

So If you really want to use css properties in this case you have to inject them inline using style attribute

 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);
    };

Check this for dynamic css manipulation : http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_css_setcolor

这篇关于与HTML输出标记工作，查看可扩展的图像，并分配SRC的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！