H5文件上传1

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HuploadifyTest.aspx.cs" Inherits="Test_HuploadifyTest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="../uploadifynew/Huploadify.css" rel="stylesheet" type="text/css" />
<script src="../uploadifynew/jquery.js" type="text/javascript"></script>
<script src="../uploadifynew/jquery.Huploadify.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="fileid">
</div>
<img src="" alt="" class="cardImg" id="imgid" style='width: 200px; height: auto;
margin-left: 10px' /><!--预览图片-->
<!--图片上传按钮-->
</div>
</form>
</body>
</html>
<script type="text/javascript">
/*
*图片上传公共方法
*domName 图片上传的div的ID
*domPic 显示上传后图片img的ID，如无图片预览可不设置
*/
var HuploadTest = {
uploadInit: function (domName, domPic) {
$("#" + domName).Huploadify({
auto: true,
fileTypeExts: '*.jpg;*.gif;*.bmp;*.png;*.jpeg',
multi: false,
formData: { modulename: "测试上传" },
fileObjName: 'Filedata',
fileSizeLimit: 99999999999,
showitemTemp: false,
showUploadedPercent: false,
showUploadedSize: false,
showUploadbtn: false,
removeTimeout: 9999999,
buttonText: '图片上传',
uploader: "/Test/Handler.ashx?otype=UploadTest",
onUploadSuccess: function (file, data) {
console.log("data:" + data);
var Data = JSON.parse(data);
if (Data != null) {
var FileData = Data.data.split(',');
if (FileData != null) {
var id = FileData[0];
console.log("id:" + id);
var filepath = FileData[1];
console.log("filepath:" + filepath);
$("#" + domPic).attr("src", filepath);
}
} else {
alert('解析失败');
}
},
onUploadError: function (file, response) {
alert("上传失败!");
}
});

}


}

 

//调用公共方法
HuploadTest.uploadInit("fileid", "imgid");
</script>

posted @ 2020-11-11 10:43  .net&new  阅读(136)  评论(0)  编辑  收藏  举报