您的位置：首页 > Web前端 > JavaScript

七牛base64上传（前端js，后端c#）

2015-06-08 13:57 579 查看

1，首先看下前端的代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="bs64-js.aspx.cs" Inherits="WebApplication1.Up.bs64_js" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
function putb64() {
var pic = document.getElementById('bstext').value;
var token = document.getElementById('token').value;
var byte = document.getElementById('byt').value;
var key = document.getElementById('key').value;
var url = "http://up.qiniu.com/putb64/" + byte+"/key/"+key;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
document.getElementById("myDiv").innerHTML = xhr.responseText;
}
}
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/octet-stream");
xhr.setRequestHeader("Authorization",token);
xhr.send(pic);
alert("success");
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<span>1,Uptoken是需要自己在服务端生成，返回给客户端，客户端拿到字符串可以使用，这里我签发了一个，可能一段时间就会过期。<br>
2,上面url中的http://up.qiniu.com/putb64/20264，其中20264是你的图片的流大小，不是bs64编码后的字节大小。<br>
</span>
<asp:Label ID="Label2" runat="server" Text="token"></asp:Label> <asp:TextBox ID="token" runat="server"></asp:TextBox><br />
<asp:Label ID="Label4" runat="server" Text="picLocation"></asp:Label><asp:TextBox ID="pic" runat="server"></asp:TextBox><br />
<asp:Label ID="Label3" runat="server" Text="bspic"></asp:Label> <asp:TextBox ID="bstext" runat="server"></asp:TextBox><br />
<asp:Label ID="Label1" runat="server" Text="byte"></asp:Label><asp:TextBox ID="byt" runat="server"></asp:TextBox><br />
<asp:Label ID="Label5" runat="server" Text="key"></asp:Label><asp:TextBox ID="key" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="配置完成" OnClick="Button1_Click" />
<asp:Button ID="Button2" runat="server"  Text="发送bs64图片" OnClientClick="return putb64()"   />
<div id="myDiv">
</div>
</form>
</body>
</html>

2，后端代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using WebApplication1.IO;

namespace WebApplication1.Up
{
public partial class bs64_js : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}

protected void Button1_Click(object sender, EventArgs e)
{
bs64handle bsh = new bs64handle();
bsh.ToBase64(pic.Text);
bstext.Text = bsh.base64;
byt.Text = bsh.length.ToString();
System.Text.Encoding encoding = System.Text.Encoding.UTF8;
byte[] bytesSK = encoding.GetBytes(key.Text);
key.Text = Convert.ToBase64String(bytesSK);
token.Text = "UpToken " + token.Text;//token需要从后端获取。这里我采用手动复制到文本框的方式获取。
}

}
}

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.Serialization.Formatters.Binary;
using System.Web;
using System.Web.UI.WebControls;

namespace WebApplication1.Up
{
public class bs64handle
{

public string base64;
public long length;
public void ToBase64(string s1)
{
//System.Drawing.Image img = System.Drawing.Image.FromFile(s1);
//BinaryFormatter binFormatter = new BinaryFormatter();
//MemoryStream memStream = new MemoryStream();
//binFormatter.Serialize(memStream, img);
//byte[] bytes = memStream.GetBuffer();
//base64 = Convert.ToBase64String(bytes);
//length = bytes.Length;
FileInfo fi = new FileInfo(s1);
length = fi.Length;
FileStream fs = new FileStream(s1, FileMode.Open);
byte[] buffer = new byte[length];
fs.Read(buffer, 0, (int)length);
fs.Close();
length = buffer.Length;
base64 = Convert.ToBase64String(buffer);
}

/// <summary>
/// 将Base64字符串转换为图片
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void ToImage(object sender, EventArgs e)
{
byte[] bytes = Convert.FromBase64String(base64);
MemoryStream memStream = new MemoryStream(bytes);
BinaryFormatter binFormatter = new BinaryFormatter();
Image img = (Image)binFormatter.Deserialize(memStream);

}
}
}

3，这个demo存在的问题

真正的js base64上传其实不应该有后端获取（fsize和base64字符串的），只有token需要从远程服务端获取。（js可以计算出fsize大小和base64字符串），也就是说上面2中说的后端的那块。完全可以在前端js中实现。我在这里只是简单的介绍下base64上传的用法。

4，base64具体官方接口说明文档

点击查看

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航