支持本地文件转base64编码

一款支持本地文件转base64编码的特效代码，可点击添加或拖放文件到指定区域，然后代码自动识别并将文件的base64编码显示在下面的文本框内，非常方便将小的图片文件转换一下用在页面的显示里面，这样能节约服务器或空间的资源，喜欢的童鞋请收下吧。

分类：表单代码 > 输入框难易：初级

查看演示下载资源下载积分： 30 积分

页面的head部分，仅需引入一个CSS样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，需设置好文件拖放或添加的区域，这里用了一个div容器，另外将转换后的base64编码写入textarea里面，代码如下：

<div class="head"></div>
<h1>Base64编码</h1>
<h2>简洁易用，兼容性好</h2>
<div class="upload">
  <div class="inner">点击添加或拖放文件</div>
</div>
<br />
<div class="sub">✪ <span><a href="#">可本地离线使用</a> ❤ <a href="#">可嵌入服务器</a></span> ✪</div>
<section id="result" style="display:none;">
  <textarea class="base64"></textarea>
</section>
<form><input type='file' id="image_input" style="display:none;"/></form>
<div class="foot"></div>

页面的底部，需远程调用jQuery库，并引入本地JS文件，代码如下：

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>

支持本地文件转base64编码【原创】

页面的head部分，仅需引入一个CSS样式文件，代码如下：

页面的body部分，需设置好文件拖放或添加的区域，这里用了一个div容器，另外将转换后的base64编码写入textarea里面，代码如下：

页面的底部，需远程调用jQuery库，并引入本地JS文件，代码如下：