當前位置:首頁 » 網頁前端 » 前端實現上傳圖片
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端實現上傳圖片

發布時間: 2022-05-09 11:18:06

A. 用html, css, javascript ,怎麼讓用戶要麼選擇上傳自己的圖片,要不選擇在網頁出給出的圖片詳情見下

可以給文件上傳控制項再添加一個onclick事件啊,當點擊這個input時,把myimg的src賦值給cusInput,然後當onchange事件發生再把上傳後的圖片地址賦值給cusInput,這樣的話即使因為圖片路徑相同未觸發onchange事件,但onclick事件仍然發生了啊,cusInput仍然保留了上一次上傳的圖片路徑:

<inputtype="file"name="pic"onchange="change(event)"onclick="cusInput=document.getElementById('myimg').src">

B. 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;
}
}

C. 前端,圖片上傳點擊 input type=file 選擇好了想要上傳的圖片,點擊打開,

你是要傳到伺服器的話那就是後台實現。

如果不傳到伺服器在頁面上不能直接顯示出來,系統有限制。 但是在大部分的手機瀏覽器裡面是可以直接讀取。

例如下面這段直接載入本地選擇的圖片地址,會報錯:Not allowed to load local resource

意思是不允許讀取本地資源。

varfileupload=document.getElementById('upload');

fileupload.onchange=function(event){
varimg=document.createElement('img');
img.src=this.value;
document.body.appendChild(img);
};

D. Javascript如何實現上傳圖片的功能

你應該用asp、php、jsp、.net、pythone、ruby、node.js之類的東西寫一個運行在伺服器上的後台程序。

你寫的js是在瀏覽器前端運行的,瀏覽器上傳圖片是往伺服器端程序發送數據,前端運行的js是沒這個能力的。

E. 前端怎麼傳圖片給後台(java)

你可以現在前台控制台列印一下base64的流,看看是否獲取圖片成功。如果成功再去後台看看獲取的文件信息,haerd中是否有數據。
然後就是你沒有後台代碼,這里也不好判斷是否是接收問題

F. web前端上傳圖片的幾種方法

下面給你介紹3種web前端上傳圖片的方法:

1.表單上傳

最傳統的圖片上傳方式是form表單上傳,使用form表單的input[type=」file」]控制項,打開系統的文件選擇對話框,從而達到選擇文件並上傳的目的。

ajax無刷新上傳

Ajax無刷新上傳的方式,本質上與表單上傳無異,只是把表單里的內容提出來採用ajax提交,並且由前端決定請求結果回傳後的展示結果。

3.各類插件上傳

當上傳的需求要求可預覽、顯示上傳進度、中斷上傳過程、大文件分片上傳等等,這時傳統的表單上傳很難實現這些功能,我們可以藉助現有插件完成。

如網路上傳插件Web Uploader、jQuery圖片預覽插件imgPreview 、拖拽上傳與圖像預覽插件Dropzone.js等等,大家可根據項目實際需求選擇適合的插件。

G. 前端,js實現圖片上傳的原理是設么能回答面試即可

H5的話,就是把本地的圖片按照指定的格式讀取到緩存里,再供JS代碼進行調用傳給後台,格式的話base64吧

H. 前端上傳文件的幾種方法

1.表單上傳

最傳統的圖片上傳方式是form表單上傳,使用form表單的input[type=」file」]控制項,打開系統的文件選擇對話框,從而達到選擇文件並上傳的目的。

form表單上傳

表單上傳需要注意以下幾點:

(1).提供form表單,method必須是post。

(2).form表單的enctype必須是multipart/form-data。

javascript學習交流群:453833554

enctype 屬性規定在發送到伺服器之前應該如何對表單數據進行編碼。默認地,表單數據會編碼為 "application/x-www-form-urlencoded"。就是說,在發送到伺服器之前,所有字元都會進行編碼。HTML表單如何打包數據文件是由enctype這個屬性決定的。enctype有以下幾種取值:

application/x-www-form-urlencoded:在發送前編碼所有字元(默認)(空格被編碼為』+』,特殊字元被編碼為ASCII十六進制字元)。

multipart/form-data:不對字元編碼。在使用包含文件上傳控制項的表單時,必須使用該值。

text/plain:空格轉換為 「+」 加號,但不對特殊字元編碼。

默認enctype=application/x-www-form-urlencoded,所以表單的內容會按URL規則編碼,然後根據表單的提交方法:

method=』get』 編碼後的表單內容附加在請求連接後,

method=』post』 編碼後的表單內容作為post請求的正文內容。

I. 前端實現多圖片上傳獲取到一個數組怎麼在後台接受這個數組

// 這是一個嵌入到網頁中動態顯示50是張圖片的java小應用程序,希望你對有幫助!
import java.awt.*;

import java.applet.*;
public class Picture extends Applet
{
Image[] theImages;
int nNum = 50;
int nNow = 0;

public void init()
{
theImages = new Image[nNum];
for(int i = 0; i < nNum ; i++)//將圖片裝入數組
theImages[i] = getImage(getDocumentBase(), "pic" + Integer.toString(i) + ".jpg");
}
public void start()
{
nNow = 0;
}
public void paint(Graphics g)
{
g.drawImage(theImages[nNow],500,500,this);
nNow++;
if(nNow>=nNum)
nNow = 0;
try
{
Thread.sleep(50);
}
catch(Exception e){showStatus(e.toString());}
repaint();
}
public void main()
{
Graphics g;
g=this.getGraphics ();
init();
start();
paint(g);

}
}

J. js 前端上傳多張圖片

  1. 可以用webuploader插件,上傳成功後,服務端返回圖片地址,客戶端<img>顯示圖片

  2. X關閉按鈕這個得自己用css樣式控制,點擊X後,服務端刪除圖片,然後前端移除該X掉的圖片