如何使用jssdk 上传图片到自己的服务器

如何使用jssdk 上传图片到自己的服务器,第1张

在网页中用jssdk上传图片到微信服务器 微信服务器返回一个server_id 然后把这个server_id传给后台 后台在通过access_token=ACCESS_TOKEN&media_id=MEDIA_ID 这个接口获取到图片信息 然后写入到文件中!

1.限制文件上传类型只能是图片

function checkFileType(name,file){

var extArray = new Array(".doc",".docx")

var allowSubmit = false

if (!file){

return

}

while (file.indexOf("\\") != -1){

file = file.slice(file.indexOf("\\") + 1)

}

var ext = file.slice(file.indexOf(".")).toLowerCase()

for (var i = 0i <extArray.lengthi++) {

if (extArray[i] == ext){

allowSubmit = true

break

}

}

if(!allowSubmit){

alert("只能上传以下格式的文件:"+ (extArray.join("")) + "\n请重新选择再上传.")

document.getElementById(name).value = ""

}

}

其中:extArray是要求文件类型。可自行定义。

2.引入jQuery外部文件

jquery-2.1.4.min.js

3.编写js代码

$(function () {

$('#txtfilePath1').uploadReview({

width: 350,

height: 350,

target: '#uploadReview1_content'

})

})

其中:txtfilePath1是input:file。width,height是预览图片的宽度和高度。target是显示预览图片的位置。

4.编写jsp页面代码

<body>

<input type="text" class="yourClassName" name="filePath1" id="filePath1"/>

<input type="file" id="txtfilePath1" name="txtfilePath1" style="display:none">

<input type="button" onclick="txtfilePath1.click()" id="fileup1" name="fileup1" class="searchThing"value="上传">

</body>

注: 这个是很久以前在网上看到的,就整理了下来,但是这么久都没用过,所以也没调试过,你自己试一试研究研究, 再来网上很多博客里,他们写的很详细的,可以去看看

File Upload组件啊,是同步还是异步呢

html部分:

<input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*">

文件引入:

<link rel="stylesheet" type="text/css" href="diyUpload/css/diyUpload.css"><script type="text/javascript" src="diyUpload/js/diyUpload.js"></script>

HTML部分:

<div id="demo"> <div id="as" ></div></div>

JS部分:

<script type="text/javascript">

/** 服务器地址,成功返回,失败返回参数格式依照jquery.ajax习惯* 其他参数同WebUploader*/

$('#as').diyUpload({

url:'server/fileupload.php',

success:function( data ) {

console.info( data ) },

error:function( err ) {

console.info( err )

},

buttonText : '选择文件',chunked:true,// 分片大小

chunkSize:512 * 1024,//最大上传的文件数量, 总文件大小,单个文件大小(单位字节)

fileNumLimit:50,

fileSizeLimit:500000 * 1024,

fileSingleSizeLimit:50000 * 1024,

accept: {}})

</script>


欢迎分享,转载请注明来源:夏雨云

原文地址:https://www.xiayuyun.com/zonghe/338302.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-05
下一篇2023-05-05

发表评论

登录后才能评论

评论列表(0条)

    保存