var

如何使用 JavaScript 发起一个带参数 HTTP POST请求上传文件并获取返回值

lyingzhu 2024年1月31日 2024年1月31日

要在 JavaScript 中发起一个 HTTP POST 请求以上传文件, 你可以使用 FormData 对象并结合 XMLHttpRequest 对象来实现。以下是一个示例：

JavaScript

// 从HTML中获取文件和其他参数
var fileInput = document.getElementById('fileInput'); // 获取文件上传的input元素
var file = fileInput.files[0];
var param1 = 'value1';
var param2 = 'value2';

// 创建一个 FormData 对象
var formData = new FormData();
formData.append('file', file);
formData.append('param1', param1);
formData.append('param2', param2);

// 设置POST请求的URL
var url = "your-post-url";

// 发起POST请求并获得返回文本值
fetch(url, {
  method: 'POST',
  body: formData
}).then(function(response) {
  return response.text(); // 解析文本返回值
}).then(function(text) {
  console.log(text); // 这里的text就是从服务器返回的文本值
}).then(function(data) {
    console.log(data); // 这里的text就是从服务器返回的文本值
}).catch(function(error) {
  console.error('发生错误', error);
});

// 从HTML中获取文件和其他参数

var fileInput = document.getElementById('fileInput'); // 获取文件上传的input元素

var file = fileInput.files[0];

var param1 = 'value1';

var param2 = 'value2';

// 创建一个 FormData 对象

var formData = new FormData();

formData.append('file', file);

formData.append('param1', param1);

formData.append('param2', param2);

// 设置POST请求的URL

var url = "your-post-url";

// 发起POST请求并获得返回文本值

fetch(url, {

method: 'POST',

body: formData

}).then(function(response) {

return response.text(); // 解析文本返回值

}).then(function(text) {

console.log(text); // 这里的text就是从服务器返回的文本值

}).then(function(data) {

console.log(data); // 这里的text就是从服务器返回的文本值

}).catch(function(error) {

console.error('发生错误', error);

});

在这个示例中，我们首先获取了要 …

继续阅读"如何使用 JavaScript 发起一个带参数 HTTP POST请求上传文件并获取返回值"

技术类留下评论

js,JQ 图片转换base64 base64转换为file对象,blob对象

lyingzhu 2021年12月13日 2022年9月9日

<pre class="inline:true class:language-javascript decode:1 " >//将图片转换为Base64 
//url 图片连接或者是blob对象
//callback 回调函数
function getImgToBase64(url,callback){
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  var img = new Image;//经过构造函数来建立的 img 实例，在赋予 src 值后就会马上下载图片，相比 createElement() 建立 <img /> 省去了 append()，也就避免了文档冗余和污染
  img.crossOrigin = 'Anonymous';
  //要先确保图片完整获取到，这是个异步事件
  img.onload = function(){
    canvas.height = img.height;//确保canvas的尺寸和图片同样
    canvas.width = img.width; ctx.drawImage(img,0,0);//将图片绘制到canvas中
    var dataURL = canvas.toDataURL('image/png');//转换图片为dataURL,传第二个参数可压缩图片,前提是图片格式jpeg或者webp格式的
    callback(dataURL);//调用回调函数
    canvas = null; }; img.src = url; } //将base64转换为文件对象
function dataURLtoFile(dataurl, filename) { var arr = dataurl.split(','); var mime = arr[0].match(/:(.*?);/)[1]; var bstr = atob(arr[1]); var n = bstr.length; var u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } //转换成file对象
  return new File([u8arr], filename, {type:mime}); //转换成成blob对象
  //return new Blob([u8arr],{type:mime});
} //将图片转换为base64,再将base64转换成file对象<br />
getImgToBase64('images/ruoshui.png',function(data){<br /> 　　　var myFile = dataURLtoFile(data,'testimgtestimgtestimg');<br /> 　　　console.log(myFile); <br />});

<pre class="inline:true class:language-javascript decode:1 " >//将图片转换为Base64

//url 图片连接或者是blob对象

//callback 回调函数

function getImgToBase64(url,callback){

var canvas = document.createElement('canvas');

var ctx = canvas.getContext('2d');

var img = new Image;//经过构造函数来建立的 img 实例，在赋予 src 值后就会马上下载图片，相比 createElement() 建立 <img /> 省去了 append()，也就避免了文档冗余和污染

img.crossOrigin = 'Anonymous';

//要先确保图片完整获取到，这是个异步事件

img.onload = function(){

canvas.height = img.height;//确保canvas的尺寸和图片同样

canvas.width = img.width; ctx.drawImage(img,0,0);//将图片绘制到canvas中

var dataURL = canvas.toDataURL('image/png');//转换图片为dataURL,传第二个参数可压缩图片,前提是图片格式jpeg或者webp格式的

callback(dataURL);//调用回调函数

canvas = null; }; img.src = url; } //将base64转换为文件对象

function dataURLtoFile(dataurl, filename) { var arr = dataurl.split(','); var mime = arr[0].match(/:(.*?);/)[1]; var bstr = atob(arr[1]); var n = bstr.length; var u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } //转换成file对象

return new File([u8arr], filename, {type:mime}); //转换成成blob对象

//return new Blob([u8arr],{type:mime});

} //将图片转换为base64,再将base64转换成file对象<br />

getImgToBase64('images/ruoshui.png',function(data){<br /> 　　　var myFile = dataURLtoFile(data,'testimgtestimgtestimg');<br /> 　　　console.log(myFile); <br />});

toDataURL函数说明(能够压缩图片)

<pre class="inline:true class:language-javascript decode:1 " >canvas.toDataURL(type, encoderOptions);
//   type 可选
//　　     图片格式，默认为 image/png
//   encoderOptions 可选
//　　     在指定图片格式为 image/jpeg 或 image/webp的状况下，能够从 0 到 1 的区间内选择图片的质量。若是超出取值范围，将会使用默认值 0.92。其余参数会被忽略

<pre class="inline:true class:language-javascript decode:1 " >canvas.toDataURL(type, encoderOptions);

// type 可选

//　　图片格式，默认为 image/png

// encoderOptions 可选

//　　在指定图片格式为 image/jpeg 或 image/webp的状况下，能够从 0 到 1 的区间内选择图片的质量。若是超出取值范围，将会使用默认值 0.92。其余参数会被忽略

继续阅读"js,JQ 图片转换base64 base64转换为file对象,blob对象"

技术类留下评论

通过js给网页加上水印背景

lyingzhu 2021年4月27日 2022年9月9日

HTML代码：

<pre class="inline:true class:language-html decode:1 " >&lt;div id="water-div" style="pointer-events: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;"&gt; &lt;/div&gt;
&lt;script type="text/javascript" &gt;
            function watermark(txt) {
                //初始设置水印容器高度                
                var water = document.getElementById("water-div");
                water.innerHTML = "";
               
                //水印样式默认设置
                var defaultSettings={
                    watermark_txt:txt,
                    watermark_x:20,//水印起始位置x轴坐标
                    watermark_y:20,//水印起始位置Y轴坐标
                    watermark_rows:2000,//水印行数
                    watermark_cols:2000,//水印列数
                    watermark_x_space:50,//水印x轴间隔
                    watermark_y_space:30,//水印y轴间隔
                    watermark_color:'#aaaaaa',//水印字体颜色
                    watermark_alpha:0.3,//水印透明度
                    watermark_fontsize:'18px',//水印字体大小
                    watermark_font:'微软雅黑',//水印字体
                    watermark_width:280,//水印宽度
                    watermark_height:80,//水印高度
                    watermark_angle: 15//水印倾斜度数

                };
 
                //获取页面最大宽度
                var page_width = Math.max(document.documentElement.clientWidth, window.screen.availWidth);
                //获取页面最大高度
                var page_height = Math.max(document.documentElement.clientHeight, window.screen.availHeight);
                
 
                //水印数量自适应元素区域尺寸
                defaultSettings.watermark_cols=Math.ceil(page_width/(defaultSettings.watermark_x_space+defaultSettings.watermark_width));
                defaultSettings.watermark_rows=Math.ceil(page_height/(defaultSettings.watermark_y_space+defaultSettings.watermark_height));
                var x;
                var y;
                for (var i = 0; i &lt; defaultSettings.watermark_rows; i++) {
                    y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
                    for (var j = 0; j &lt; defaultSettings.watermark_cols; j++) {
                        x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;
                        var mask_div = document.createElement('div');
                        //mask_div.id = 'mask_div' + i + j;
                        mask_div.className = 'mask_div';
                        //mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
                        mask_div.innerHTML=(defaultSettings.watermark_txt);
                        //设置水印div倾斜显示
                        mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                        mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                        mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                        mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                        mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                        mask_div.style.visibility = "";
                        mask_div.style.position = "absolute";
                        mask_div.style.left = x + 'px';
                        mask_div.style.top = y + 'px';
                        mask_div.style.overflow = "hidden";
                        mask_div.style.zIndex = "9999";
                        mask_div.style.pointerEvents='none';//pointer-events:none 让水印不遮挡页面的点击事件
                        //mask_div.style.border="solid #eee 1px";
                        //兼容IE9以下的透明度设置  
                        mask_div.style.filter = "alpha(opacity=50)";
                        mask_div.style.opacity = defaultSettings.watermark_alpha;
                        mask_div.style.fontSize = defaultSettings.watermark_fontsize;
                        mask_div.style.fontFamily = defaultSettings.watermark_font;
                        mask_div.style.color = defaultSettings.watermark_color;
                        mask_div.style.textAlign = "center";
                        mask_div.style.width = defaultSettings.watermark_width + 'px';
                        mask_div.style.height = defaultSettings.watermark_height + 'px';
                        mask_div.style.display = "block";                        
                        water.appendChild(mask_div);
                        //document.getElementById("content").appendChild(mask_div);
                    }
                }
            }

            function getCurrentDate(format) {
                var now = new Date();
                var year = now.getFullYear(); //得到年份
                var month = now.getMonth();//得到月份
                var date = now.getDate();//得到日期
                var day = now.getDay();//得到周几
                var hour = now.getHours();//得到小时
                var minu = now.getMinutes();//得到分钟
                var sec = now.getSeconds();//得到秒
                month = month + 1;
                if (month &lt; 10) month = "0" + month;
                if (date &lt; 10) date = "0" + date;
                if (hour &lt; 10) hour = "0" + hour;
                if (minu &lt; 10) minu = "0" + minu;
                if (sec &lt; 10) sec = "0" + sec;
                var time = "";
                //精确到天
                if (format == 1) {
                    time = year + "-" + month + "-" + date;
                }
                    //精确到分
                else if (format == 2) {
                    time = year + "-" + month + "-" + date + " " + hour + ":" + minu + ":" + sec;
                }
                return time;
            }
        &lt;/script&gt;

100

101

102

103

function watermark(txt) {

//初始设置水印容器高度

var water = document.getElementById("water-div");

water.innerHTML = "";

//水印样式默认设置

var defaultSettings={

watermark_txt:txt,

watermark_x:20,//水印起始位置x轴坐标

watermark_y:20,//水印起始位置Y轴坐标

watermark_rows:2000,//水印行数

watermark_cols:2000,//水印列数

watermark_x_space:50,//水印x轴间隔

watermark_y_space:30,//水印y轴间隔

watermark_color:'#aaaaaa',//水印字体颜色

watermark_alpha:0.3,//水印透明度

watermark_fontsize:'18px',//水印字体大小

watermark_font:'微软雅黑',//水印字体

watermark_width:280,//水印宽度

watermark_height:80,//水印高度

watermark_angle: 15//水印倾斜度数

};

//获取页面最大宽度

var page_width = Math.max(document.documentElement.clientWidth, window.screen.availWidth);

//获取页面最大高度

var page_height = Math.max(document.documentElement.clientHeight, window.screen.availHeight);

//水印数量自适应元素区域尺寸

defaultSettings.watermark_cols=Math.ceil(page_width/(defaultSettings.watermark_x_space+defaultSettings.watermark_width));

defaultSettings.watermark_rows=Math.ceil(page_height/(defaultSettings.watermark_y_space+defaultSettings.watermark_height));

var x;

var y;

for (var i = 0; i < defaultSettings.watermark_rows; i++) {

y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;

for (var j = 0; j < defaultSettings.watermark_cols; j++) {

x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;

var mask_div = document.createElement('div');

//mask_div.id = 'mask_div' + i + j;

mask_div.className = 'mask_div';

//mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));

mask_div.innerHTML=(defaultSettings.watermark_txt);

//设置水印div倾斜显示

mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";

mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";

mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";

mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";

mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";

mask_div.style.visibility = "";

mask_div.style.position = "absolute";

mask_div.style.left = x + 'px';

mask_div.style.top = y + 'px';

mask_div.style.overflow = "hidden";

mask_div.style.zIndex = "9999";

mask_div.style.pointerEvents='none';//pointer-events:none 让水印不遮挡页面的点击事件

//mask_div.style.border="solid #eee 1px";

//兼容IE9以下的透明度设置

mask_div.style.filter = "alpha(opacity=50)";

mask_div.style.opacity = defaultSettings.watermark_alpha;

mask_div.style.fontSize = defaultSettings.watermark_fontsize;

mask_div.style.fontFamily = defaultSettings.watermark_font;

mask_div.style.color = defaultSettings.watermark_color;

mask_div.style.textAlign = "center";

mask_div.style.width = defaultSettings.watermark_width + 'px';

mask_div.style.height = defaultSettings.watermark_height + 'px';

mask_div.style.display = "block";

water.appendChild(mask_div);

//document.getElementById("content").appendChild(mask_div);

}

function getCurrentDate(format) {

var now = new Date();

var year = now.getFullYear(); //得到年份

var month = now.getMonth();//得到月份

var date = now.getDate();//得到日期

var day = now.getDay();//得到周几

var hour = now.getHours();//得到小时

var minu = now.getMinutes();//得到分钟

var sec = now.getSeconds();//得到秒

month = month + 1;

if (month < 10) month = "0" + month;

if (date < 10) date = "0" + date;

if (hour < 10) hour = "0" + hour;

if (minu < 10) minu = "0" + minu;

if (sec < 10) sec = "0" + sec;

var time = "";

//精确到天

if (format == 1) {

time = year + "-" + month + "-" + date;

}

//精确到分

else if (format == 2) {

time = year + "-" + month + "-" + date + " " + hour + ":" + minu + ":" + sec;

}

return time;

}

</script>

调用：

<pre class="inline:true class:language-html decode:1 " >window.onload = function () { watermark("水印文字" + getCurrentDate(2)); };

1	<pre class="inline:true class:language-html decode:1 " >window.onload = function () { watermark("水印文字" + getCurrentDate(2)); };

效果如图：

继续阅读"通过js给网页加上水印背景"

技术类留下评论

原生Js 实现等比缩放页面

lyingzhu 2021年4月21日 2022年9月9日

针对1920*1080 分配率缩放

<pre class="inline:true class:language-javascript decode:1 " >window.addEventListener('load', adaptation);
window.addEventListener('resize', adaptation);
function adaptation () {
  var w = document.body.clientWidth;
  var h = document.body.clientHeight;
  var nw = 1920;
      nh = 1080;
  var left, top, scale;
  if (w / h &gt; nw / nh) {
    scale = h / nh;
    top = 0;
    left = (w - nw * scale) / 2;
  } else {
    scale = w / nw;
    left = 0;
    top = (h - nh * scale) / 2;
  }
 
  document.body.style.zoom = scale;
  //document.getElementById('main').setAttribute('style', 'transform: scale('+ scale +');left:'+left+'px;top:'+top+'px;');
}

<pre class="inline:true class:language-javascript decode:1 " >window.addEventListener('load', adaptation);

window.addEventListener('resize', adaptation);

function adaptation () {

var w = document.body.clientWidth;

var h = document.body.clientHeight;

var nw = 1920;

nh = 1080;

var left, top, scale;

if (w / h > nw / nh) {

scale = h / nh;

top = 0;

left = (w - nw * scale) / 2;

} else {

scale = w / nw;

left = 0;

top = (h - nh * scale) / 2;

}

document.body.style.zoom = scale;

//document.getElementById('main').setAttribute('style', 'transform: scale('+ scale +');left:'+left+'px;top:'+top+'px;');

}

继续阅读"原生Js 实现等比缩放页面"

技术类留下评论

JQuery 实现随机生成数字+字母验证码

lyingzhu 2020年8月13日 2022年9月9日

效果图

<pre class="inline:true class:language-html decode:1 " >&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;!--验证码--&gt;
   &lt;script language="javascript" type="text/javascript"&gt;
     
            var code;
            function createCode() {  //函数体
                code = "";
                var codeLength = 5; //验证码的长度
                var checkCode = document.getElementById("checkCode");
                var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
                'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
                'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //所有候选组成验证码的字符，当然也可以用中文的
                for (var i = 0; i &lt; codeLength; i++)
                {
                    var charNum = Math.floor(Math.random() * 52);//设置随机产生
                    code += codeChars[charNum];
                }
                if (checkCode)
                {
                    checkCode.className = "code";
                    checkCode.innerHTML = code;
                }
            }        
         &lt;/script&gt;
     
&lt;/head&gt;
&lt;style&gt;
    /*验证码*/
.code
    {
          background-color: silver;
            font-family:Arial; /*设置字体*/
            font-style:initial;
             color:brown;
             font-size:20px;
             border:0;
              padding:2px 3px;
             letter-spacing:3px;
             font-weight:bolder;            
              
             width:81px;
             height:23px;      
             margin-left: 120px;
             margin-top: -35px;
 
    }
    a
    {
        text-decoration:none;
        font-size:12px;
        color:#288bc4;
        }
    a:hover
    {
       text-decoration:underline;
        }
       .yz{
         position: absolute;
          margin-left: 220px;
          margin-top:-10px;
        }
         
&lt;/style&gt;
&lt;body onload="createCode()"&gt;&lt;!--在页面加载的同时要加载验证码，否则页面加载完后验证码不会显示 --&gt;
    &lt;p&gt;
        &lt;label&gt;      验证码：&lt;/label&gt; 
         &lt;div class="code" id="checkCode" onclick="createCode()" &gt;&lt;/div&gt;&lt;a class="yz"  href="#" onclick="createCode()"&gt;看不清换一张&lt;/a&gt;
      &lt;/p&gt;
      &lt;p&gt;
          &lt;label&gt;请输入验证码：&lt;/label&gt;&lt;input id="YZ" name="yz" width="30px;"&gt;
      &lt;/p&gt;
      &lt;input class="btttom"  type="button" name="OK" id="OK" onclick="GetDom()" value="确认"/&gt;
       
&lt;/body&gt;
&lt;!--验证--&gt;
&lt;script&gt;
  function GetDom(){
    if(document.getElementById("YZ").value==""){
            alert("验证码不能为空！");
            createCode();//输错一次或提交一次都将会刷新一次验证码
            return false; //结束本次会话
          }else if(document.getElementById("YZ").value.toUpperCase()!=code.toUpperCase()){ //toUpperCase不区分大小写
            alert("您输入的验证码有误，请重新输入！！");
            createCode();//读取文件
          }                  
      else{
            alert("ok");
        }
      
  } 
&lt;/script&gt;
&lt;/html&gt;

<head>

<title>Document</title>

var code;

function createCode() { //函数体

code = "";

var codeLength = 5; //验证码的长度

var checkCode = document.getElementById("checkCode");

var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,

'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',

'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //所有候选组成验证码的字符，当然也可以用中文的

for (var i = 0; i < codeLength; i++)

{

var charNum = Math.floor(Math.random() * 52);//设置随机产生

code += codeChars[charNum];

}

if (checkCode)

{

checkCode.className = "code";

checkCode.innerHTML = code;

}

</script>

</head>

<style>

/*验证码*/

.code

{

background-color: silver;

font-family:Arial; /*设置字体*/

font-style:initial;

color:brown;

font-size:20px;

border:0;

padding:2px 3px;

letter-spacing:3px;

font-weight:bolder;

width:81px;

height:23px;

margin-left: 120px;

margin-top: -35px;

}

{

text-decoration:none;

font-size:12px;

color:#288bc4;

}

a:hover

{

text-decoration:underline;

}

.yz{

position: absolute;

margin-left: 220px;

margin-top:-10px;

}

</style>

<p>

<div class="code" id="checkCode" onclick="createCode()" ></div><a class="yz" href="#" onclick="createCode()">看不清换一张</a>

</p>

<p>

<label>请输入验证码：</label><input id="YZ" name="yz" width="30px;">

</p>

</body>

function GetDom(){

if(document.getElementById("YZ").value==""){

alert("验证码不能为空！");

createCode();//输错一次或提交一次都将会刷新一次验证码

return false; //结束本次会话

}else if(document.getElementById("YZ").value.toUpperCase()!=code.toUpperCase()){ //toUpperCase不区分大小写

alert("您输入的验证码有误，请重新输入！！");

createCode();//读取文件

}

else{

alert("ok");

}

</script>

</html>

继续阅读"JQuery 实现随机生成数字+字母验证码"

免责声明

本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。如发现有害或侵权内容，请与我们联系，邮箱：web@cutepig.net