js和后端上传文件/图片案例
规操作之笔记摘要！！
1、JS和C#一般处理程序简易上传案例
<a href="#" style="color: #696969; margin-left: 2px;" ng-click="UpdaLoad()" class="kx-ui-btn kx-ui-btn-e">excel模板</a>
<input type="file" id="fileUpload" accept=".xls,.xlsx" name="fileUpload" style="display: none" />
$scope.UpdaLoad = function () {
var Id ="" ; //附件上传需要的id
const load = document.getElementById("fileUpload");
load.click();
load.onchange = function () {
let files = load.files;
if (parseInt((files[0].size / (1024 * 1024)).toFixed(2)) > 10) {
//提示：文件大小不能大于10MB
return;
}
if (files[0].type && (files[0].type.split('/')[1].toLowerCase() == "xls" || files[0].type.split('/')[1].toLowerCase() == "xlsx")) {
var formData = new FormData();
formData.append("file", files[0]);
formData.append("FileId", Id);
//$.ajax({
// method: 'POST',
// url: '地址?action=处理程序方法名称',
// data: formData,
// processData: false,
// contentType: false,
// success: function (res) {
// if (res.Result == 100) {
// }
// else {
// //失败
// }
// },
// error: function (err) {
// }
//});
}
else {
//定义提示信息和图标
}
};
}
后端代码：
/// <summary>
/// 上传pdf文件并转换为图片
/// </summary>
/// <param name="context"></param>
/// <returns></returns>
public string 处理程序方法名称(HttpContext context)
{
HttpPostedFile file = context.Request.Files["file"];
var FileId = context.Request["FileId"];
var FileName = "/附件路径/";
var Name = ""; //名称
var FileUrl = "";
var Msg = "";
FileParamObject fileParam;
List<FileParamObject> Parms = new List<FileParamObject>();
try
{
//创建文件夹
FileHelper.CreateDir(context.Server.MapPath(FileName), true);
var url = context.Server.MapPath(FileName);
//文件全名、文件名、后缀名
string fileName = file.FileName,
thisName = fileName.Substring(0, fileName.LastIndexOf(".", StringComparison.Ordinal)),
thisSuffixName = FileHelper.GetFileExtension(fileName).Substring(1, FileHelper.GetFileExtension(fileName).Length - 1).ToLower();
if (thisSuffixName == "pdf")
{
Name = $"SealFile_{FileId}" + "." + thisSuffixName;
file.SaveAs(url + Name);
var imageFormat = ImageFormat.Png; //定义图片格式
PDFFile pdfFile = PDFFile.Open(url + Name);
if (!Directory.Exists(url))
{
Directory.CreateDirectory(url);
}
//开始转换每个页面
for (int i = 1; i <= pdfFile.PageCount; i++)
{
var s = i - 1;
var aa = 56 * (int)Definition.Five;
fileParam = new FileParamObject();
Bitmap pageImage = pdfFile.GetPageImage(i - 1, 56 * (int)Definition.Five);
pageImage.Save(url + "/" + $"SealFile_{FileId}" + "_" + i.ToString() + "." + imageFormat.ToString(), imageFormat);
FileUrl += $"{FileName}" + $"SealFile_{FileId}" + "_" + i.ToString() + "." + imageFormat.ToString() + ";";
pageImage.Dispose();
}
pdfFile.Dispose();
//删除上传的pdf
var hasFile = File.Exists(url + Name);
if (hasFile)
{
File.Delete(url + Name);
}
Msg = "上传数据成功！";
}
else
{
isSuccess = false;
Msg = "请上传pdf类型的文件！";
}
}
catch (Exception e)
{
isSuccess = false;
Msg = "上传数据失败，请稍后再试！";
}
return "上传成功";
}1、JS和C# ASPx.cs简易上传图片案例
.imgPic{
display: block;
width: 115px;
height: 115px;
padding: 5px; JS+
border: 1px solid #d0d0d0
}
<img class='imgPic' id="imgPic" src="默认显示图片" runat="server" />
<input id="files" name="files" accept=".jpg,.jpeg,.png,.gif,.bmp" type="file" onchange="javascript:filesonchange();" runat="server" style="display: none;" />
<a href="javascript:void(0)" onclick="uploadFile()">上传图片</a>
function uploadFile() {
var ie = navigator.appName == "Microsoft Internet Explorer" ? true : false;
if (ie) {
document.getElementById("files").click();
} else {
var a = document.createEvent("MouseEvents"); //ff的处理
a.initEvent("click", true, true);
document.getElementById("files").dispatchEvent(a);
}
}
//上传图片
function filesonchange(avalue) {
var docObj = document.getElementById("files");
var imgObjPreview = document.getElementById("imgPic");
if (!Validate(docObj)) {
return false;
}
if (docObj.files && docObj.files[0]) {
//ff7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}
else {
//IE下，使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("divImgView");
//必须设置初始大小
localImagId.style.width = localImagId.firstElementChild.style.width; // "80px";
localImagId.style.height = localImagId.firstElementChild.style.height; // "30px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
try {
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}
catch (e) {
alert("您上传的图片格式不正确，请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
//验证
function Validate(doc) {
var maxsize = 2 * 1024 * 1024;//2M
var errMsg = "上传的附件文件不能超过2M！！！";
var docfile = doc.files[0];
var allowType = ["jpg", "jpeg", "gif", "png", "bmp"];
var fileType = $("#files").val().substring($("#files").val().lastIndexOf('.') + 1).toLowerCase();
if ($.inArray(fileType, allowType) == -1) {
KXO.dia.msg('请传入指定格式的图片！', 'error');
return false;
}
if (docfile.size > maxsize) {
//返回错误
return false;
}
return true;
}
//aspx.cs按钮方法
protected void btn_Click(object sender, EventArgs e){
#region 保存头像
// 获取上传的文件
HttpPostedFile uploadedFile = Request.Files["files"];
if (uploadedFile != null && uploadedFile.ContentLength > 0)
{
// 获取文件扩展名
string fileExtension = Path.GetExtension(uploadedFile.FileName);
string fileName = Path.GetFileName(uploadedFile.FileName);
// 验证文件类型
string[] allowedExtensions = { ".jpg", ".jpeg", ".png", ".gif", ".bmp" };
// 定义保存路径
string savePath = Server.MapPath("/aaa/aaa"); //需要保存的文件位置
// 如果目录不存在，则创建
if (!Directory.Exists(savePath))
{
Directory.CreateDirectory(savePath);
}
string name = DateTime.Now.ToString("yyMMddHHmmss") + fileExtension;//按照时间生成的名称+后缀
string fullPath = Path.Combine(savePath, name);
string savesqlpath ="/aaa/aaa"+name; //存储在数据库时使用相对路径(绝对路径是直接具体到某某盘)
// 保存文件到服务器
uploadedFile.SaveAs(fullPath);
}
#endregion
}
浙公网安备 33010602011771号