㈠ 前端上傳文件的幾種方法
第一種：經典的form和input上傳。
設置form的aciton為後端頁面，enctype="multipart/form-data"，type=『post』
<formaction='http://www.ty2y.com/'enctype="multipart/form-data"type='post'><inputtype='file'><inputtype='hidden'name='userid'><inputtype='hidden'name='signature'><button>提交</button></form>
使用input選擇文件，設置好其他input的值，點擊提交，將文件數據及簽名等認證信息發送到form設置的action對應的頁面，瀏覽器也會跳轉到該頁面。觸發form表單提交數據的方式有2種，一種是在頁面上點擊button按鈕或<input
type='submit'>按鈕觸發，第二種是在js中執行form.submit()方法。
優點：使用簡單方便，兼容性好，基本所有瀏覽器都支持。
缺點：1. 提交數據後頁面會跳轉（下面會講如何禁止頁面跳轉）。
2.因為是瀏覽器發起的請求，不是一個ajax，所以前端無法知道什麼時候上傳結束。
3. form表單里發送除文件外的數據，一般是新建一個type=hidden的input，value=『需要傳的數據』，每發送一個數據就需要一個input，一旦多了就會使得dom看起來比較冗餘。
小技巧：
form表單提交數據後會自動跳轉到action指定的頁面，為了禁止頁面跳轉，可以在頁面中新建一個空的ifame，比如name='upload'，然後設置form的target="Uploader"，form有一個target的屬性，規定在何處打開action，這樣form提交數據後就會仍停留在當前頁。代碼如下：
<formaction='http://www.jshaman.com/'enctype="multipart/form-data"type='post'target="uploader1"><inputtype='file'><button>提交</button></form><ifrmaename='upload'id='uploader1'></iframe>
這樣寫的另一個好處是，可以知道什麼時候上傳完成並接收到後端的回調結果。比如上面這個例子，文件數據發送到了
'uploadFile.php'，假設該頁面處理完數據後返回了一個地址，該地址會被寫入到之前的iframe中。所以在ifame的onload函數觸發時，也就是上傳完成後，可以在iframe中讀取到後端返回的數據。
variframe=document.getElementById('upload1');
iframe.onload=function(){
vardoc=window.frames['uploader1'].document;varpre=doc.getElementsByTagName('pre');varobj=JSON.parse(pre[0].innerHTML);
}使用這種方法時需要注意，iframe有跨域限制，創建出來的iframe的地址如果和當前頁面地址不同源，會報錯。這種情況下，建議大家在iframe的onload函數中，再次向後端請求一個介面獲取文件地址，而不是直接去iframe里讀取。或者返回這樣的數據。
<scripttype="text/javascript">window.top.window[callback](data)</script>
callback是和前端約定好的名字，上傳完成後觸發該函數並返回後端數據。
第二種：使用formData上傳。
用js構造form表單的數據，簡單高效，但最低只兼容IE10，所以需要兼容IE9的童鞋們就略過這個方法吧。
html:
<inputtype='file'>
js:
varformData=newFormData();
formData.append("userid",userid);
formData.append("signature",signature);
formData.append("file",file);//file是blob數據//再用ajax發送formData到伺服器即可，
注意一定要是post方式上傳
說明：第一種方法提到了創建多個type=『hidden』的input來發送簽名數據，這兒可以用formData.append方法來代替該操作，避免了dom中有多個input的情況出現。最後將file數據也append到formData發送到伺服器即可完成上傳。
優點：由於這種方式是ajax上傳，可以准確知道什麼時候上傳完成，也可以方便地接收到回調數據。
缺點：兼容性差
第三種：使用fileReader讀取文件數據進行上傳。
HTML5的新api，兼容性也不是特別好，只兼容到了IE10。
varfr=newFileReader();
fr.readAsDataURL(file);
fr.onload=function(event){vardata=event.target.result;//此處獲得的data是base64格式的數據img.src=data;
ajax(url,{data},function(){})
}
上面獲得的data可以用來實現圖片上傳前的本地預覽，也可以用來發送base64數據給後端然後返回該數據塊對應的地址。
優點：同第二種
缺點：一次性發送大量的base64數據會導致瀏覽器卡頓，伺服器端接收這樣的數據可能也會出現問題。
㈡ php上傳圖片到伺服器的前端和php代碼
<?
require_once('../classfile/guid.class.php');
if(!isset($_FILES['imgFile'])){
echojson_encode(array("success"=>false,'msg'=>"NotgetImgfile"));
return;
}
$upfile=$_FILES['imgFile'];
$name=$upfile["name"];//上傳文件的文件名
$type=$upfile["type"];//上傳文件的類型
$size=$upfile["size"];//上傳文件的大小
$tmp_name=$upfile["tmp_name"];//上傳文件的臨時存放路徑
$error_cod=$upfile["error"];
if($error_cod>0){
echojson_encode(array("success"=>false,'msg'=>$error_cod));
}
$ext_file_name="";
switch($type){
case'image/pjpeg':
$okType=true;
$ext_file_name =".jpg";
break;
case'image/jpeg':
$okType=true;
$ext_file_name =".jpg";
break;
case'image/gif':
$okType=true;
$ext_file_name =".gif";
break;
case'image/png':
$okType=true;
$ext_file_name =".png";
break;
}
if(!$okType){
echojson_encode(array("success"=>false,'msg'=>"Notimage"));
return;
}
$web_root="D:".DIRECTORY_SEPARATOR."Easy2PHP5".DIRECTORY_SEPARATOR."webSiteJfz".DIRECTORY_SEPARATOR;
$photo_tmp_path=$web_root."img".DIRECTORY_SEPARATOR."userimg".DIRECTORY_SEPARATOR."temp";
$temp_file_name=creat_guid(0).$ext_file_name;
$photo_tmp_file_name=$photo_tmp_path.DIRECTORY_SEPARATOR.$temp_file_name;
$photo_tmp_file_scr="img".DIRECTORY_SEPARATOR."userimg".DIRECTORY_SEPARATOR."temp".DIRECTORY_SEPARATOR.$temp_file_name;
move_uploaded_file($tmp_name,$photo_tmp_file_name);
echojson_encode(array("success"=>true,'msg'=>"ok","file_name"=>$photo_tmp_file_name,"file_scr"=>$photo_tmp_file_scr));
//echojson_encode(array("success"=>false,'msg'=>json_encode($_FILES['imgFile'])));
return;
?>
guid.class.php//生成唯一的圖片文件名
<?
functioncreat_guid($long){
$uuid="";
if(function_exists('com_create_guid')){
$uuid=com_create_guid();
}else{
mt_srand((double)microtime()*10000);//optionalforphp4.2.0anp.
$charid=strtoupper(md5(uniqid(rand(),true)));
$hyphen=chr(45);//"-"
$uuid=chr(123)//"{"
.substr($charid,0,8).$hyphen
.substr($charid,8,4).$hyphen
.substr($charid,12,4).$hyphen
.substr($charid,16,4).$hyphen
.substr($charid,20,12)
.chr(125);//"}"
//return$uuid;
}
if(!isset($long)||$long==0){
returnsubstr($uuid,1,strlen($uuid)-2);
}else{
return$uuid;
}
}