layer利用base64字符串另类文件上传的方法

分享 未结 0 407
ftong
ftong 2019-1-28
悬赏:20飞吻
1、obj.preview(function(index, file, result) //result为base64字符串
2、XMLHttpRequest()向服务器send base64字符串

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../resource/layui/css/layui.css" media="all">
<!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>常规使用:普通图片上传</legend>
</fieldset>

<div class="layui-upload">
<button type="button" class="layui-btn" id="test1">上传图片</button>
<div class="layui-upload-list">
<img class="layui-upload-img" id="demo1">
<p id="data"></p>
<p id="demoText"></p>
</div>
</div>

<script src="../../resource/layui/layui.js" charset="utf-8"></script>
<script src="../../resource/layui/yunserver.js" charset="utf-8"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
<script>
layui.use('upload', function(){
var $ = layui.jquery
,upload = layui.upload;

//普通图片上传
var uploadInst = upload.render({
elem: '#test1'
,url: '../uploadsuccess.asp'
//,before: function(obj){
,choose: function(obj){
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
//$('#demo1').attr('src', result); //图片链接(base64)
document.getElementById("data").innerText=result;//.substring(result.indexOf(',')+1);
var xhr=getHttpObj(encodeURIComponent(result),'cs.asp');
xhr.onreadystatechange=function() {
if (xhr.readyState==4 && xhr.status==200) {
var svrdata = xhr.responseText; //在客户端显示服务器返回值
alert(svrdata);
$('#demo1').attr('src', svrdata);
}};
});
}
});

});
</script>
</body>
</html>
为防止url空白出错,将下面代码复制到uploadsuccess.asp
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
{"code": 0 ,"msg": "" ,"data": {"src": "http://cdn.layui.com/123.jpg" }}

cs.asp
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
’在这里对base64字符串进行处理......,可以采用asp+com
sql=request("clientxt")
response.write sql '将接受的字符串返回客户端
%>
回帖
  • 消灭零回复