ajax上传图片并预览

最新推荐文章于 2021-08-05 19:39:03 发布

Walnutt

最新推荐文章于 2021-08-05 19:39:03 发布

阅读量88

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq_44849953/article/details/116101208

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>uploadpic</title>
		<style type="text/css">
			#preview{
				width:200px;
				height:200px;
			}
			#content{
				margin:auto;
				width:500px;
				heigth:300px;
				background-color:lightblue;
			}
			#upper{
				height:250px;
				width:500px;
				background-color:gray;
			}
			#midth{
				heigth:50px;
				width:500px;
				background-color:lightcyan;
			}
			#lower{
				height:50px;
				width:500px;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<div id="upper">
				<span id="file_span">file:</span>
				<input id="upload_input" type="file" onchange="changeImg(this)"accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" />
				<img id="preview" alt="preview" />
			</div>
			<div id="midth">
				<span id="upload_span">choose file</span>
				<progress id="upload_progress" value="0" max="100"></progress>
			</div>
			<div id="lower">
				<button class="content_button" onclick="cancelUpload()">cancel</button>
				<button class="content_button" onclick="serverUpload()">upload</button>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		function changeImg(fileDom){
			if(window.FileReader){
				var reader = new FileReader();
			}
			else{
				alert("no support");
			}
			var file = fileDom.files[0];
			var imageType = /^image\//;
			if(!imageType.test(file.type)){
				alert("choose one");
				return;
			}
			reader.onload = function(e){
				var img = document.getElementById("preview");
				img.src = e.target.result;
			};
			reader.readAsDataURL(file);
		}
		function serverUpload(){
			var uploadFile = document.getElementById("upload_input");
			var uploadTip = document.getElementById("upload_span");
			var uploadProgress = document.getElementById("upload_progress");
			uploadFile.innerText="begin";
			if(uploadFile.value==""){
				uploadFile.innerText="choose one";
			}
			else if(uploadFile.files[0].size < (40*1024*1024)){
					if(window.FileReader){
						var fReader = new FileReader();
						var xhreq = xmlHttp = new XMLHttpRequest();
						fReader.readAsArrayBuffer(uploadFile.files[0]);
						uploadProgress.value=0;
						xhreq.onreadystatechange = function(){
							if(xhreq.status==200&&xhreq.readyState==4){
								uploadTip.innerText="success";
								setTimeout(function(){},2000);
							}
							else{
								uploadTip.innerText="fail"+" "+xhreq.status+" "+xhreq.readyState;
							}
						}
						fReader.onload=function(e){
							xhreq.open("POST","/upload",true);
							xhreq.setRequestHeader("Content-type", "application/octet-stream"); //流类型，用二进制
							xhreq.setRequestHeader("uploadfile_name", encodeURI(uploadFile.files[0].name)); //兼容中文文件名
							xhreq.send(fReader.result);
						}
						fReader.onprogress = function(e){
							uploadProgress.value = e.loaded*100/e.total;
						}
					}
					else{
						uploadTip.innerText="no support";
					}
			}
			else{
				uploadTip.innerText="no match";
			}
		}
	</script>
</html>

js server1

var http = require("http");
var fs = require("fs");
var path = require("path")
var url = require('url');
var express = require('express');
var bodyParser = require('body-parser');//express的中间件，解析请求的body，因为我们把上传的文件附在body中了
var sql = require('mssql');//访问mssql的中间件

var app = express();
//app.use(express.static(__dirname,{index:"uploadpic.html"}))

//app.use('/static', express.static(path.join(__dirname, '/shop/images')))
//var textParser = app.use(bodyParser.json({ type: 'text/plain' }))
app.use(bodyParser.raw({ limit: '50mb' }));
//app.use(bodyParser.urlencoded({ extended: true }));

// 数据库连接字符串
var dbConfig = {
    user: 'sa',
    password: '123456',
    //  server: 'DESKTOP-J9CT7QV\\sqlexpress',
    server: 'localhost\\sqlexpress',
    database: 'OnlineShop',
};

//应该先把上传的文件放到一个临时目录，重新命名保证文件名的唯一性，把文件名跟随响应发到客户端。等到整条记录保存成功再移到正式的目录下，把路径文件名写入数据库；如果没有成功保存，可以定时清除临时目录下的垃圾文件
// 上传文件的接收函数
app.post('/upload', function (req, res) {
    console.log('upload begin...');
    var uploadFilename = decodeURI(req.headers['uploadfile_name']);
    console.log(uploadFilename);  // 上传的文件信息
    var des_file = __dirname + "/uploadpics/" + uploadFilename;/*/upload/*/
    console.log(des_file);
    fs.writeFile(des_file, req.body, function (err) {
        if (err) {
            console.log(err);
        } else {
            response = {
                message: 'File uploaded successfully',
                filename: uploadFilename
            };
        }
        console.log(response);
        res.end(JSON.stringify(response));
    });
})

/********************************  数据接口 *****************************/
// 查询productId的商品信息
app.get('/110/getProduct/:productId', function (req, res) {
    var conn = new sql.ConnectionPool(dbConfig);
    var sqlreq = new sql.Request(conn);
    conn.connect(function (err) {
        if (err) {
            console.log(err);
            return;
        }
        console.log(req.url)
        console.log("productID: " + req.params['productId']);
        // 查询Production表
        var selectSqlParams = { 'pid': { type: 'Int', value: parseInt(req.params['productId']) } };
        var selectSql = "select * from Production where id = @pid";
        sqlreq.input('pid',sql.Int,req.params['productId'])
        sqlreq.query(selectSql, function (err, recordset) {
            if (err) {
                console.log(err);
                return;
            }
            else {
                console.log(recordset);
                res.end(JSON.stringify(recordset.recordset[0]));
            }
            conn.close();
        });
    });
})

// 查询所有的商品信息
app.get('/110/getProductList', function (req, res) {
    var conn = new sql.ConnectionPool(dbConfig);
    var sqlreq = new sql.Request(conn);
    conn.connect(function (err) {
        if (err) {
            console.log(err);
            return;
        }
        // 查询Production表
        var selectSql = "select * from Production";
        sqlreq.query(selectSql, function (err, recordset) {
            if (err) {
                console.log(err);
                return;
            }
            else {
                //console.log(recordset);
                res.end(JSON.stringify(recordset));
            }
            conn.close();
        });
    });
})

// 添加新的商品详细信息
app.post('/110/addProductDetails', bodyParser.urlencoded({ extended: true }), function (req, res) {
    var data = {
        "name": req.body.name,
        "price": req.body.price,
        "desc": req.body.desc,
        "pic1": req.body.pic1
    };
    console.log(req.body)
    var conn = new sql.ConnectionPool(dbConfig);
    var sqlreq = new sql.Request(conn);
    conn.connect(function (err) {
        if (err) {
            console.log(err);
            return;
        }
        console.log(data);
        // 插入Production表
        var insertSql = "insert into Production(ProductName, Price, Description, photo1) values('"
            + data.name + "'," + data.price + ",'" + data.desc + "','\\110\\images\\" + data.pic1 + "')";
        sqlreq.query(insertSql, function (err, recordset) {
            if (err) {
                console.log(err);
                return;
            }
            else {
                console.log(recordset.rowsAffected[0]);
                res.end("");
            }
            conn.close();
        });
    });
})
/*********************************************************************************/

//  匹配任何页面，实际可以用"*"
app.get(/(\w+\\)*(\w+\.\w+)/, function (req, res) {
    //console.log(req.url);
    var url = req.url.replace(/(\?\w+=\d+)/, "") // 去掉URL的参数，single.html页面使用了?id=123形式的参数
    //console.log(url);
    if (req.url.lastIndexOf('?') != -1) {
        var id = req.url.substr(req.url.lastIndexOf('?') + 1)//提取参数放入cookie
        console.log("id=" + id.split("=")[1]);
        //res.append('Set-Cookie', id + '; Path=/; HttpOnly')
        res.cookie('id', id.split("=")[1])
    }

    var options = {
        root: __dirname,
        contentType: "application/x-www-form-urlencoded; charset=UTF-8;" // 传递json文件时，注意要与文件的字符集一致....... X-Content-Type-Options: nosniff
    }
    res.sendFile(url.substr(1), options);
})

var server = app.listen(8888, "127.0.0.1", function () {

    var host = server.address().address
    var port = server.address().port

    console.log("应用实例，访问地址为 http://%s:%s", host, port)

})

js server2

var http = require('http');
http.createServer(function (request, response) {
response.writeHead(200, {'Content-Type': 'text/plain'});
    // 发送响应数据 "Hello World"
    response.end('Hello World\n');
}).listen(8888);
// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');