公司引進高拍儀，想拍完照片點上傳按鈕直接上傳圖片。高拍儀接口能提供照片的本地路徑，現在的問題是不用file控件選擇，只有路徑，不知道如何上傳到服務器，求解決方案。
方法：
使用澤優Web圖片上傳控件（img2）幫助解決圖片手動上傳的問題，使用img2后可以自動上傳本地路徑下面的圖片，不需要用戶再手動選擇圖片。
優勢：
1.不需要通過AJAX上傳BASE64，直接上傳本地圖片文件數據。
2.AJAX上傳BASE64存在跨域問題，img2不存在跨域問題，可以靈活指定文件存儲服務器。或者采用分布式存儲方式。
原理
1.img2提供了接口addFile和addFolder，可以直接加載本地路徑下面的圖片或目錄。
2.添加后可以調用post方法開始上傳圖片。
3.不需要開發人員編寫上傳代碼，img2提供了asp,jsp,php,asp.net常用語言的上傳代碼，下載即用，整合方便，代碼清晰簡單。
澤優Web圖片上傳控件（img2）
加載圖片
自動加載本地目錄
<scripttype="text/javascript">
var imgUp = new ImageUploader();
imgUp.LoadTo("img-uper");
imgUp.ent.loadCmp = function () {
setTimeout(function () {
imgUp.addFolder("F:\\ftp");//自動加載本地目錄下的所有圖片
}, 1000);
};
</script>
自動加載本地路徑下的圖片文件
<scripttype="text/javascript">
var imgUp = new ImageUploader();
imgUp.LoadTo("img-uper");
imgUp.ent.loadCmp = function () {
setTimeout(function () {
imgUp.addFile("F:\\ftp\\test.jpg");//
}, 1000);
};
</script>
服務端jsp上傳代碼
publicvoid SaveFile(FileItem upFile) throws IOException
{
String fileName = upFile.getName();
//如果控件是以UTF-8編碼方式提交的數據則使用下面的方式對文件名稱進行解碼。
fileName = fileName.replaceAll("\\+","%20");
//客戶端使用的是encodeURIComponent編碼
fileName = URLDecoder.decode(fileName,"UTF-8");
this.m_fileName = fileName;
this.CreateFolder();
String filePath = this.m_folder + this.m_fileName;
InputStream stream = upFile.getInputStream();
byte[] data = newbyte[(int)upFile.getSize()];//128k
stream.read(data);
stream.close();
RandomAccessFile raf = newRandomAccessFile(filePath,"rw");
//定位文件位置
raf.write(data);
raf.close();
}
asp.net文件上傳代碼
using System;
using System.Web;
using System.IO;
namespace WebApplication1
{
publicpartialclassupload : System.Web.UI.Page
{
protectedvoid Page_Load(object sender, EventArgs e)
{
var remark = HttpUtility.UrlDecode(remark);
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);
}
}
}
}
}
php文件上傳代碼
<?php
ob_start();
//201201/10
$timeDir = date("Ym")."/".date("d");
$pathSvr = dirname(__FILE__)."/upload/$timeDir/";
$curDomain = "http://".$_SERVER["HTTP_HOST"];
//相對路徑 http://www.ncmem.com/upload/2012-1-10/
$pathRel = "$curDomain/img/upload/$timeDir/";
//自動創建目錄。upload/2012-1-10
if(!is_dir($pathSvr))
{
mkdir($pathSvr,0777,true);
}
//如果PHP頁面為UTF-8編碼，請使用urldecode解碼文件名稱
//$fileName = urldecode($_FILES['img']['name']);
//如果PHP頁面為GB2312編碼，則可直接讀取文件名稱
$nameSvr = $_FILES['img']['name'];
$nameSvr = urldecode($nameSvr);
$tmpName = $_FILES['img']['tmp_name'];
//$uid = $_POST["UserID"];
$id = $_POST["id"];
$width = $_POST["width"];
$height = $_POST["height"];
$remark = $_POST["remark"];//utf-8則需要進行URL解碼,gbk不用解碼
$cateName = $_POST["cname"];
$cateVal = $_POST["cvalue"];
//取文件擴展名jpg,gif,bmp,png
$path_parts = pathinfo($nameSvr);
$ext = $path_parts["extension"];
//只允許上傳圖片類型的文件
if( 0 == strcasecmp($ext,"jpg")
|| 0 == strcasecmp($ext,"jpeg")
|| 0 == strcasecmp($ext,"png")
|| 0 == strcasecmp($ext,"gif")
|| 0 == strcasecmp($ext,"bmp") )
{
//xxx/2011_05_05_091250000.jpg
$savePath = $pathSvr . $nameSvr;
//另存為新文件名稱
if (!move_uploaded_file($tmpName,$savePath))
{
exit('upload error!' . "文件名稱：" .$nameSvr . "保存路徑：" . $savePath);
}
}
//輸出圖片路徑
//$_SERVER['HTTP_HOST']localhost:81
//$_SERVER['REQUEST_URI'] /FCKEditor2.4.6.1/php/test.php
$reqPath = str_replace("upload.php","",$_SERVER['REQUEST_URI']);
$fn = $pathRel.$nameSvr;
$res = "{\"id\":\"$id\",\"success\":1,\"url\":\"$fn\"}";
echo $res;
header('Content-type: text/html; charset=utf-8');
header('Content-Length: ' . ob_get_length());
?>
澤優web圖片上傳控件（img2）采用HTTP協議上傳，支持asp,jsp,php,asp.net等任何Web開發語言。且提供js-sdk，能夠方便的集成到任何項目中。
詳細介紹：http://blog.ncmem.com/wordpress/2019/09/05/澤優web圖片上傳控件img2產品介紹/