使用jquery.form.js實作圖片上傳的方法

首頁

web前端

js教程

使用jquery.form.js實作圖片上傳的方法_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:02 PM

圖片上傳

本文實例講述了使用jquery.form.js實作圖片上傳的方法。分享給大家參考，具體如下：

testupfile2.php

<&#63;php
header('Content-type:text/html;charset=utf-8');
include_once 'includes/common.inc.php';
 if(!empty($_FILES['upfile'])){
 //文件格式
 $image=array('image/jpg',
   'image/jpeg',
   'image/png',
   'image/pjpeg',
   'image/gif',
   'image/bmp',
   'image/x-png'
 );
$updir=$_SERVER['DOCUMENT_ROOT'].$_config['g']['baseUrl'].'/attached/images/';
$upfile=$_FILES['upfile'];
$name=$upfile['name'];
$ext=substr($upfile['name'],strpos($upfile['name'],'.'));
$upname=md5(time().rand(1, 1000)).$ext;
$type=$upfile['type'];
$size=$upfile['size'];
$tmp_name=$upfile['tmp_name'];
$error=$upfile['error'];
$ok=0;
 foreach ($image as $key=>$value) {
 if($type==$value)$ok=1;
 }
 if($ok=='1' && $error=='0'){
 move_uploaded_file($tmp_name,$updir.$upname);
 //echo '<br>'.$tmp_name.'<br>'.$upname.'<br>'.$updir.'<br>'.$ext.'上传成功';
 //echo '上传成功';
 echo $upname;
 //$im=$updir.$upname;
 //echo $im;
 //echo '<img src='.$updir.$upname.' />';
 //$views->assign('image',$upname);
 //$views->display('default/testupfile.html');
 }
 else echo '上传失败2';
}
else echo '上传失败1';
&#63;>

登入後複製

testupfile.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<!--{$baseUrl}-->/scripts/jquery.js"></script>
<script type="text/javascript" src="<!--{$baseUrl}-->/scripts/jquery.form.js"></script>
<script type="text/javascript">
$(function(){
 //jquery.form image1
 $("#upimage").bind("click",function(){
 if($("#upfile").val()==""){
  alert("请选择一个图片文件,再点击");
  return;
 }
 $("#form1").ajaxSubmit({
  url:"testupfile2.php",
  type:"POST",
  //date:"upfile=upfile",
  success:function(response){
  alert(response);
  $("#ln").empty();
  $("#ln").append("<img src='<!--{$baseUrl}-->/attached/images/"+response+"' width='100' height='60'/>");
  $("#im1").val(response);
  },
  error:function(msg){
  alert("出错了");
  }
 });
 });
 //jquery.form image2
 $("#upimage2").bind("click",function(){
 if($("#upfile2").val()==""){
  alert("请选择一个图片文件,再点击2");
  return;
 }
 $("#form2").ajaxSubmit({
  url:"testupfile2.php",
  type:"POST",
  //date:"upfile=upfile2",
  success:function(response2){
  alert(response2);
  $("#ln2").empty();
  $("#ln2").append("<img src='<!--{$baseUrl}-->/attached/images/"+response2+"' width='100' height='60'/>");
  $("#im2").val(response2);
  },
  error:function(msg){
  alert("出错了");
  }
 });
 });
});
</script>
</head>
<body>
文件上传
<form enctype="multipart/form-data" id="form1" method="post" action="">
文件:
 <input type="file" name="upfile" id="upfile"><input type="button" id="upimage" value="图片上传1">
 <input type="text" name="im1" id="im1" value="" />
</form>
<form enctype="multipart/form-data" id="form2" method="post" action="">
文件:
 <input type="file" name="upfile" id="upfile2"><input type="button" id="upimage2" value="图片上传2">
 <input type="text" name="im2" id="im2" value="" />
</form>
<div id="ln">tu</div><br>
<div id="ln2">tu2</div>
</body>
</html>

登入後複製

更多關於jQuery相關內容有興趣的讀者可查看本站專題：《jQuery form操作技巧總結》、《jquery中Ajax用法總結》、《jQuery切換特效與技巧總結》、《jQuery拖曳特效與技巧總結》、《jQuery擴充技巧總結》、《jQuery常見經典特效總表》、《jQuery動畫與特效用法總結》、《jquery選擇器用法摘要》及《jQuery常用插件及用法摘要》

希望本文所述對大家jQuery程式設計有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7747

Java教學

1643

CakePHP 教程

1397

Laravel 教程

1291

PHP教程

1234

Related knowledge

微信小程式實現圖片上傳功能 Nov 21, 2023 am 09:08 AM

微信小程式實現圖片上傳功能隨著行動網路的發展，微信小程式已經成為了人們生活中不可或缺的一部分。微信小程式不僅提供了豐富的應用場景，還支援開發者自訂功能，其中包括圖片上傳功能。本文將介紹如何在微信小程式中實作圖片上傳功能，並提供具體的程式碼範例。一、前期準備工作在開始編寫程式碼之前，我們需要先下載並安裝微信開發者工具，並註冊成為微信開發者。同時，也需要了解微信

使用CakePHP框架實現圖片上傳和顯示的步驟 Jul 29, 2023 pm 04:21 PM

使用CakePHP框架實現圖片上傳和顯示的步驟引言：在現代Web應用程式中，圖片上傳和顯示是常見的功能需求。 CakePHP框架為開發者提供了強大的功能和便利的工具，使得實現圖片上傳和顯示變得簡單且有效率。本文將向您介紹如何使用CakePHP框架來實現圖片上傳和顯示。步驟1：建立文件上傳表單首先，我們需要在檢視文件中建立表單，以便使用者上傳圖片。以下是一個範例的

Vue技術開發如何處理圖片上傳與壓縮 Oct 08, 2023 am 10:58 AM

Vue技術開發如何處理圖片上傳和壓縮在現代web應用中，圖片上傳是一個非常常見的需求。然而，由於網路傳輸和儲存等方面的原因，直接上傳原始的高解析度圖片可能會導致上傳速度慢和儲存空間的大量浪費。因此，對於圖片的上傳和壓縮是非常重要的。在Vue技術開發中，我們可以使用一些現成的解決方案來處理圖片上傳和壓縮。以下將介紹如何使用vue-upload-compone

如何使用PHP和Vue實現圖片上傳功能 Sep 25, 2023 pm 03:17 PM

如何使用PHP和Vue實現圖片上傳功能在現代網頁開發中，圖片上傳功能是非常常見的需求。本文將詳細介紹如何使用PHP和Vue來實現圖片上傳功能，並提供具體的程式碼範例。一、前端部分（Vue）首先需要在前端建立一個用來上傳圖片的表單。具體程式碼如下：<template><div><inputtype="fil

如何使用ThinkPHP6實作圖片上傳 Jun 20, 2023 pm 09:25 PM

隨著互聯網的發展，圖片上傳已經成為了網站和應用程式開發中的一個必不可少的功能。而在PHP領域，ThinkPHP6已經成為了一個非常流行的開發框架。在本文中，我們將介紹如何使用ThinkPHP6實作圖片上傳。一、建立專案和控制器首先，我們需要建立一個新的ThinkPHP6專案。可以使用Composer進行安裝，也可以在官網下載最新版。安裝完成後，在控制台中進入

Vue技術開發中如何實現圖片上傳與裁剪 Oct 10, 2023 pm 12:46 PM

Vue技術開發中如何實現圖片上傳和裁剪，需要具體程式碼範例在現代Web開發中，圖片上傳和圖片裁剪是常見的需求之一。 Vue.js作為一個流行的前端框架，提供了豐富的工具和插件來幫助我們實現這些功能。本文將介紹如何在Vue技術開發中實現圖片上傳和裁剪，並提供具體的程式碼範例。圖片上傳的實作可以分為兩個步驟：選擇圖片和上傳圖片。在Vue中，可以使用第三方插件來簡化這個

如何使用PHP實現一個簡單的線上圖片上傳和展示系統 Sep 25, 2023 am 09:21 AM

如何使用PHP實現一個簡單的線上圖片上傳和展示系統圖片上傳和展示系統是現代網站常用的功能之一，在開發過程中使用PHP可以快速實現這個功能。本篇文章將介紹如何使用PHP編寫一個簡單的線上圖片上傳和展示系統，並提供具體的程式碼範例。一、建立資料庫和表格首先，我們需要建立一個資料庫和表格來儲存上傳的圖片資訊。使用下列SQL語句建立一個名為"images"的表格，並設

Vue開發中如何解決圖片上傳預覽模態框顯示問題 Jul 01, 2023 pm 01:13 PM

Vue開發中如何解決圖片上傳預覽模態框顯示問題在Vue開發中，經常會遇到需要上傳圖片並預覽的需求。在這種情況下，一個常見的問題是如何在上傳圖片之後，在模態框中顯示預覽圖片。本文將介紹一種解決這個問題的方法。首先，我們需要在Vue的元件中加入一個檔案上傳的input元素，用於選擇要上傳的圖片檔案。透過監聽檔案上傳的change事件，我們可以取得到使用者選擇的圖片

See all articles

使用jquery.form.js實作圖片上傳的方法_jquery

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題