JavaScript进阶(八)JS实现图片预览并导入服务器功能

JavaScript进阶(八)JS实现图片预览并导入服务器功能JS实现导入文件功能赠人玫瑰,手留余香。若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉!(PS:此篇博文是自己在午饭时间所写,为此没吃午饭,这就是程序猿的生活。)项目开发过程中,需要实现文件上传功能。借此机会学习之。使用HTML中现有的inputtype“file”可以支持这一功能。如下所示:

大家好,又见面了,我是你们的朋友全栈君。

     
赠人玫瑰,手留余香。若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉!

      项目开发过程中,需要实现文件上传功能。借此机会学习之。

      使用HTML中现有的input type “file”可以支持这一功能。如下所示:

 <input ng-model="url" id="url" type="file"/>

       浏览时只显示指定文件类型

<input type="file" accept="application/msword" ><br><br>accept属性列表<br>
      1.accept="application/msexcel"

      2.accept="application/msword"

      3.accept="application/pdf"

      4.accept="application/poscript"

      5.accept="application/rtf"

      6.accept="application/x-zip-compressed"

      7.accept="audio/basic"

      8.accept="audio/x-aiff"

      9.accept="audio/x-mpeg"

      10.accept="audio/x-pn/realaudio"

      11.accept="audio/x-waw"

      12.accept="image/gif"

      13.accept="image/jpeg"

      14.accept="image/tiff"

      15.accept="image/x-ms-bmp"

      16.accept="image/x-photo-cd"

      17.accept="image/x-png"

      18.accept="image/x-portablebitmap"

      19.accept="image/x-portable-greymap"

      20.accept="image/x-portable-pixmap"

      21.accept="image/x-rgb"

      22.accept="text/html"

      23.accept="text/plain"

      24.accept="video/quicktime"

      25.accept="video/x-mpeg2"

      26.accept="video/x-msvideo"

     下面的问题是:如何获得文件的上传路径,然后才能进行文件的读写后续操作。

      下面是一个图片上传、预览的Demo:

<!doctype html> 
<html> 
    <head> 
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> 
    <title>Image preview example</title> 
    <script type="text/javascript"> 
        var loadImageFile = (function () { 
        if (window.FileReader) { 
            var oPreviewImg = null, oFReader = new window.FileReader(), 
            rFilter = /^(?:image\/bmp|image\/cis\-        cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i; 
 
        oFReader.onload = function (oFREvent) { 
        if (!oPreviewImg) { 
            var newPreview = document.getElementById("imagePreview"); 
            oPreviewImg = new Image(); 
            oPreviewImg.style.width = (newPreview.offsetWidth).toString() + "px"; 
            oPreviewImg.style.height = (newPreview.offsetHeight).toString()+"px"; 
            newPreview.appendChild(oPreviewImg); 
        } 
        oPreviewImg.src = oFREvent.target.result; 
        arr = oPreviewImg.src.toString().split(",");
        alert(arr[0]);
        alert(arr[1]);
}; 
 
    return function () { 
        var aFiles = document.getElementById("imageInput").files; 
        if (aFiles.length === 0) { return; } 
        if (!rFilter.test(aFiles[0].type)) { alert("You must select a valid image     file!"); return; } 
            oFReader.readAsDataURL(aFiles[0]); 
        } 
    } 
    if (navigator.appName === "Microsoft Internet Explorer") { 
        return function () { 
            alert(document.getElementById("imageInput").value); 
            document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value; 
        } 
    } 
    })(); 
</script> 
<style type="text/css"> 
    #imagePreview { 
    width: 160px; 
    height: 120px; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); 
} 
</style> 
</head> 
<body> 
    <div id="imagePreview"> 
</div> 
    <form name="uploadForm"> 
<p> 
    <input id="imageInput" type="file" name="myPhoto" onchange="loadImageFile();" /><br /> 
    <input type="submit" value="Send" /></p> 
</form> 
</body> 
</html> 

测试

通过测试,可得到文件的格式、编码方式及编码内容,如下所示:

 JavaScript进阶(八)JS实现图片预览并导入服务器功能JavaScript进阶(八)JS实现图片预览并导入服务器功能

领悟

      通过阅读代码,可以获取到图片的格式与编码方式了。接下来就是文件的传输了。

      经历了两天的屈辱、不甘、痛苦挣扎,自己最终还是顽强的站了起来。

      晚上回到宿舍继续挣扎,慢慢思路得以理清:在获取到图片的Base64编码格式之后,自己就联想到了之前写过的文件传输代码了,当然之前写的都是一些基本的文件操作。由此,自己联想,在这使用最原始的文件传输方法应该也可以实现。

      早晨到实验室,自己先尝试将图片的Base64编码传输至服务端,在服务端接收到客户端传输来的Base64编码后,采用Base64Img工具包(点击下载工具包)将Base64图片编码转换为图片格式,并保存至指定位置。初次尝试,将图片文件保存至本地是没有问题的。经过更改一些细微的细节问题,将程序部署在阿里云服务器上,经过测试,SUCCESS!

核心代码

html

<div style="padding-top: 15px">
<label for="pic">更新广告图片 :</label>
<!-- <a class="btn btn-warning btn-sm" id="choice" ng-click="doChoice()" style="font-size:14px; color:red; font-family:微软雅黑; border-radius: 9px;">选择文件</a> -->
<input id="imageInput" type="file" accept="image/jpeg" 	    	onchange="loadImageFile();" />
<i id="img" hidden="hidden"></i>
<i id="imgName" hidden="hidden"></i>
</div>

javaScript

arr = oPreviewImg.src.toString().split(",");
document.getElementById("img").innerHTML = arr[1];
document.getElementById("imgName").innerHTML = 	  	document.getElementById("imageInput").files[0].name;
//alert(document.getElementById("img").innerHTML);
//alert(document.getElementById("imageInput").files[0].name);// 获取   	图片名称(PS:瞬间感觉自己好聪明啊~~)
//alert(arr[0]);// 获取图片格式与编码方式
//alert(arr[1]);// 获取图片Base 64编码字节

程序截图

客户端顶部显示广告信息:

 JavaScript进阶(八)JS实现图片预览并导入服务器功能

服务端广告管理界面:

 JavaScript进阶(八)JS实现图片预览并导入服务器功能

服务端修改广告信息界面:

 JavaScript进阶(八)JS实现图片预览并导入服务器功能

结语

      至此,自己的文件上传操作终于完成了,一路坎坷,一路心酸。

      自己也曾尝试过使用ng插件ng-file-upload(见参考文献1),但最终还是以失败而告终,真心没有搞明白代码,仿照源代码写就是没有效果,而且布局也不对,自己也是汗颜了。

      自己接下来要突破的问题就是分页了,对于刚接触到的知识,往往不明觉厉。

参考文献

1.GitHub – danialfarid/ng-file-upload: Lightweight Angular directive to upload files with optional FileAPI shim for cross browser support

2.[Angularjs]ng-file-upload上传文件 – wolfy – 博客园

3.http://jsfiddle.net/danialfarid/maqbzv15/544/#update

4.登录 – 推酷

JavaScript进阶(八)JS实现图片预览并导入服务器功能

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/158944.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • mysql usegeneratedkeys_Mybatis Generator insert useGeneratedKeys keyProperty[通俗易懂]

    mysql usegeneratedkeys_Mybatis Generator insert useGeneratedKeys keyProperty[通俗易懂]Mybatis自动生成代码,需要用到mybatisGenerator,详见http://mybatis.github.io/generator/configreference/generatedKey.htmlinsert语句如果要返回自动生成的key值,一般会在insert里加入useGeneratedKeys属性,例如insertintosubtasks(SID,TID,RID,S…

  • 十大Java编程工具

    十大Java编程工具以下是大多数Java程序员在日常生活中使用的10种最常见的Java开发工具。如果您正在使用Java技术,您应该已经熟悉这些工具,但如果您不熟悉,那么现在是了解和探索它们的好时机。1.Eclipse、NetBeans或IntelliJIDEAIDE是Java开发人员最重要的工具。IDE不仅为您提供集成开发环境,还有助于导航、调试和记录您的代码。由于Eclipse是行业领导者,因此几乎一半的Java开发人员都使用它。我更进一步,除了使用Eclipse,我喜欢使用Netb

  • 小程序商城订单支付界面(小程序)

    小程序商城订单支付界面(小程序)wxml在此:<!–pages/cart/cart.wxml–><!–当数据为空时–><viewclass=’noData’wx:if=”{{dataList.length==0}}”><viewclass=’noDataImg’><imagesrc=’/images/cart-nodata…

  • hresult 0x80070005错误原因_win10灾难性故障

    hresult 0x80070005错误原因_win10灾难性故障在Winform里面用AxWindowsMediaPlayer控件,控件放在tabControl里面,当切换选项卡时报了“灾难性故障(异常来自HRESULT:0x8000FFFF(E_UNEXPECTED))” 崩溃,后来不直接拖控件到页面上,是先申明一个AxWindowsMediaPlayer对象,在需要播放媒体时在动态加载,否则移除该控件。就不出现这个问题了。不懂!

  • C# ViewState

    C# ViewStateViewState用于维护页面的UI状态,Web是没有状态的,ASP.NET页面也没有状态,它们在到服务器的每个往返过程中被实例化、执行、呈现和处理。作为Web开发人员,您可以使用众所周知的技术(如以会话状态将状态存储在服务器上,或将页面回传到自身)来添加状态。一、ViewState的原理浏览器请求Default.aspx页面在服务器端发现创建的ViewState这个时候会自动创建一…

  • 使用智能移动设备访问Ossim制

    使用智能移动设备访问Ossim制

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号