`
hk200
  • 浏览: 49766 次
  • 来自: SH
最近访客 更多访客>>
社区版块
存档分类
最新评论

即时预览图片

阅读更多

   
                               onchange="load_img(this.value,'img_s')"/>
            <!---->
               
               
           

 


       

 

function load_img(p_src, write_id) {
    var t_html;
    //        t_html = "<img src='" + p_src + "'";
    if (p_src != '') {
        if (write_id == 'img_s') {
            t_html = "<img src='" + p_src + "' id='fileChecker' onLoad='adjustImgSize(this)'>";
        }
    } else {
        t_html = "";
    }
    document.getElementById(write_id).innerHTML = t_html;
}
function adjustImgSize(img_element) {
    if (img_element.width > 120) {
        img_element.width = 120;
    }
    if (img_element.height > 120) {
        img_element.height = 120;
    }
}

相关推荐

    图片上传即时预览

    1. **HTML结构**:在页面中,我们需要一个`&lt;input type="file"&gt;`元素让用户选择图片,以及一个`&lt;img&gt;`元素用于显示预览图片。 2. **jQuery事件监听**:使用`$(document).ready()`确保DOM加载完成后,我们可以绑定`...

    前端页面图片上传即时预览功能

    将读取到的DataURL设置到`&lt;img&gt;`标签的`src`属性,就可以在页面上预览图片了。通常我们会创建一个隐藏的`&lt;img&gt;`元素或者使用CSS来实现预览效果,比如设置`max-width: 100%`和`max-height: 100%`,确保图片不会超出...

    java实现jQuery带删除功能多图片上传预览插件

    3. **图片预览**: 使用HTML5的FileReader API,可以在用户选择文件后即时预览图片。该API允许在上传之前读取文件内容,创建一个数据URL,然后在img标签的src属性中设置这个URL,实现预览效果。 4. **删除功能**: ...

    图片上传即时预览效果

    3. **CSS**:为了提供良好的用户体验,可以使用CSS来调整预览图片的大小、位置、边框等样式,使其与实际展示区域保持一致,让用户看到更接近最终显示效果的预览。 4. **异步处理**:在图片上传过程中,可以使用Ajax...

    input file图片上传即时预览

    预览图片"&gt; ``` **2. JavaScript部分:** 在`change`事件中,获取用户选择的文件,然后使用FileReader对象的`readAsDataURL`方法读取文件内容,并将其转换为Base64编码的URL,最后将这个URL赋值给`&lt;img&gt;`元素的`...

    ajax多文件上传图片文件带预览功能

    通过Ajax(异步JavaScript和XML)技术,我们可以实现无刷新的文件上传,同时在用户选择文件后即时预览图片,提升交互体验。 1. **Ajax基础**: Ajax的核心在于创建XMLHttpRequest对象,它是浏览器提供的API,允许...

    js实现上传图片即时预览

    // 将预览图片添加到DOM中 document.body.appendChild(previewImage); } ``` 关于性能问题,如果觉得之前的解决方案反应较慢,可能是因为没有考虑到异步读取文件。`FileReader`的`readAsDataURL`方法是异步的,...

    Bootstrap fileinput.js图片上传预览插件

    插件支持即时预览图片,只需要设置`data-preview-file-type="image"`,系统会自动识别并显示预览。同时,可以通过`data-preview-format`指定预览图片的格式,如`thumbnail`或`native`。 3. **多文件上传** 要实现...

    浏览器预览图片功能

    总结来说,浏览器预览图片功能主要依赖HTML5的`FileReader` API,结合`&lt;input type="file"&gt;`元素,能够实现在用户选择图片后即时预览。通过合理的代码组织和优化,可以提供流畅且高效的用户体验。

    本地图片上传即时预览

    标题中的“本地图片上传即时预览”是一个常见的前端开发功能,尤其在网页表单、社交媒体应用或者在线编辑器中非常普遍。这个功能允许用户在选择本地图片后立即在页面上看到预览效果,无需等待图片实际上传到服务器。...

    ASP.NET 图片预览

    本文将详细讲解如何在ASP.NET环境中实现图片上传后的即时预览,以及考虑不同浏览器的兼容性问题。 首先,我们需要理解ASP.NET上传图片的基本流程。在ASP.NET中,通常使用FileUpload控件让用户选择本地的图片文件。...

    鼠标掠过主题列表图片附件即时预览插件 for discuz 7.0.rar

    标题中的“鼠标掠过主题列表图片附件即时预览插件 for discuz 7.0.rar”指的是一个专为Discuz! 7.0论坛系统设计的增强功能插件。Discuz! 是一款广泛使用的开源社区论坛软件,它允许用户创建和管理在线论坛。这个插件...

    web中打印区域、鼠标拖放、粘贴多图片数据、目录、多文件进行上传

    - **图片预览**:通过获取到的图片数据,可以在客户端即时预览图片内容,增强用户体验。 - **JavaScript API**:可以使用`getPasteImgName()`函数来获取预览图片文件名,并在界面上展示预览图。 综上所述,以上...

    福建商网图片管理系统.rar

    3. 图片预览:用户可以在上传后即时预览图片,确保上传成功且质量良好。 4. 图片编辑:可能包含简单的编辑工具,如裁剪、旋转、添加文字等,以便用户个性化定制贺卡。 5. 图片展示:系统应能按照特定布局或模板展示...

    input type=file 及时预览图片

    在这个场景中,我们要讨论的是如何利用这个元素实现图片的即时预览,即用户在选择图片之后,能够在页面上实时预览所选的图片,而无需立即提交到服务器。这种功能极大地提升了用户体验,因为它允许用户在上传前确认...

    探索Asp.net mvc 的文件上传

    - 在上传图片后,可以即时预览图片,这需要将图片数据转化为Base64编码,嵌入到HTML的`&lt;img&gt;`标签中。 - 图片也可以直接在数据库中存储,需要创建相应的数据库表结构,并使用ADO.NET Data Model生成edmx文件进行...

    ASP.NET相册控件

    2. 图片预览:在上传或选择图片后,用户能够即时预览图片,确保上传的图片符合预期效果。 3. 图片缩略图:生成并显示图片的缩略图,以节省网页空间并提高加载速度。 4. 图片排序和分类:允许用户按照日期、名称或...

    swfUpload上传图片即时预览效果Java版(源代码+帮助文档)

    异步上传,上传时以百分比显示上传进度,能即时预览效果,里边有源代码和帮助文档,有注释,非常易学

    图片预览,仿QQ预览图片,查看图片功能

    在IT行业中,图片预览是一项常见的功能,尤其在社交应用、网页设计以及各种图像处理软件中,用户往往需要快速预览图片而无需打开一个全新的窗口或应用。本项目标题为"图片预览,仿QQ预览图片,查看图片功能",意味着...

    TinyMCE两个商业插件

    2. **预览功能**:用户可以在上传后即时预览图片,确保图片在发布前符合预期效果。 3. **图片裁剪和调整**:提供基本的图片编辑工具,如裁剪、旋转和调整大小,使得用户无需离开编辑器就能优化图片。 4. **多格式...

Global site tag (gtag.js) - Google Analytics