問題:
IE瀏覽器下使用Activex插件調用客戶端掃描儀掃描文件並山傳,可以將紙質檔案(如合同、文件、資料等)掃描並將掃描圖像保存到服務器,可以用於合同管理、檔案管理等。
通過插件方式調用掃描儀掃描並獲取圖像,可以減少用戶操作,減少操作出錯,如一次掃描量大也可以使用連續掃描,由系統對掃描文件進行編號或進行其他處理。
web頁面中只需通過js調用后啟動掃描儀掃描,即可獲取掃描文件的圖像編碼,再通過ajax或表單提交到服務器解碼后保存為jpg文件即可。
通過服務器上程序處理后,可以方便以后瀏覽或去其它用戶共享!
web調用掃描儀插件activex掃描圖像上傳並預覽
頁面HTML代碼
<divid="scanFileList"style="height:300px; overflow:auto;">
</div>
<div>
<inputtype="checkbox"id="cbo_set"/><labelfor="cbo_set">顯示掃描設置</label>
<inputtype="checkbox"id="cbo_lxsm"/><labelfor="cbo_lxsm">連續掃描</label>
<inputtype="button"value="掃描並提交"οnclick="scanClick();"/><inputtype="button"οnclick="selscan();"value="選擇掃描儀"/>
</div>
改進后
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>Web圖片上傳控件演示頁面</title>
<scripttype="text/javascript"src="js/jquery-1.3.2.min.js"></script>
<scripttype="text/javascript"src="js/json2.min.js"charset="utf-8"></script>
<scripttype="text/javascript"src="js/img2.js"charset="utf-8"></script>
</head>
<body>
<p>演示取cookie和session,並傳給控件,可支持firefox(45-),chrome(45-)</p>
<divid="img-uper"></div>
<divid="msg"></div>
<scripttype="text/javascript">
var imgUp = new ImageUploader();
imgUp.Config["PostUrl"] = "http://localhost:8889/asp.net/upload.aspx";
imgUp.Config["Cookie"] = 'ASP.NET_SessionId=<%=Session.SessionID%>';
imgUp.Config.Fields["UserID"] = "123456";
imgUp.LoadTo("img-uper");
imgUp.ent.loadCmp = function () {
setTimeout(function () {
//imgUp.addFolder("F:\\ftp");
}, 1000);
};
$(function () {
$("#btnAddLoc").click(function () {
imgUp.addFile($("#tb-path").val());
});
});
</script>
</body>
</html>
服務器端(fileup.aspx)接收文件代碼(用戶可以根據需要轉換為java、php等不同語言以適應現有的系統環境)
string imgBase64 = Request.Params["img"];
if(imgBase64 !=null&& imgBase64 !="")
{
byte[] imgbytes = Convert.FromBase64String(imgBase64);
string imgpath ="temp/"+ System.Guid.NewGuid()+".jpg";
System.IO.FileStream fs =new System.IO.FileStream(Server.MapPath(imgpath), System.IO.FileMode.OpenOrCreate);
fs.Write(imgbytes, 0, imgbytes.Length);
fs.Close();
Response.Write("{id:"+ Request.Params["id"]+",src:'"+ imgpath +"'}");
}
改進后:不需要轉換成BASE64,不需要通過AJAX上傳,不存在跨域問題,
using System;
using System.Web;
using System.IO;
namespace WebApplication1
{
publicpartialclassupload : System.Web.UI.Page
{
protectedvoid Page_Load(object sender, EventArgs e)
{
if (Request.Files.Count > 0)
{
string folder = Server.MapPath("/upload");
//自動創建上傳文件夾
if (!Directory.Exists(folder))
{
Directory.CreateDirectory(folder);
}
HttpPostedFile file = Request.Files.Get(0);
//utf-8編碼時需要進行urldecode
string fn = HttpUtility.UrlDecode(file.FileName);//guid,crc,md5,ori
System.Diagnostics.Debug.WriteLine(fn);
string ext = Path.GetExtension(fn).ToLower();
if (ext == ".jpg"
|| ext == ".gif"
|| ext == ".png"
|| ext == ".bmp"
|| ext == ".tif")
{
string filePath = Path.Combine(folder, fn);
file.SaveAs(filePath);
//返回json格式
string res = "{\"id\":\""+id+"\",\"success\":1,\"url\":\"/upload/"+fn+"\"}";
Response.Write(res);
}
}
}
}
}
解決方案:
采用澤優Web圖片上傳控件(img2)自動上傳本地圖片。
過程:
在掃描儀掃描后會提供一個事件,在這個事件中可以獲取掃描儀掃描的圖片路徑,將這個路徑添加到澤優Web圖片上傳控件(img2)中,img2就能夠自動上傳此圖片。img2上傳成功后會提供一個事件(post_complete),在此事件中可以得到圖片上傳后的地址。
詳細介紹:http://blog.ncmem.com/wordpress/2019/09/05/澤優web圖片上傳控件img2產品介紹/