How to upload images using jquery.form.js_jquery
The example in this article describes how to use jquery.form.js to upload images. Share it with everyone for your reference, the details are as follows:
testupfile2.php
<?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';
?>
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>
Readers who are interested in more jQuery-related content can check out the special topics on this site: "JQuery form operation skills summary", "Ajax usage summary in jquery", "Summary of jQuery switching effects and techniques", "Summary of jQuery drag effects and techniques", "Summary of jQuery extension techniques", "Summary of common classic jQuery special effects ", "jQuery animation and special effects usage summary", "jquery selector usage summary" and "jQuery common plug-ins and usage summary"
I hope this article will be helpful to everyone in jQuery programming.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
WeChat applet implements image upload function
Nov 21, 2023 am 09:08 AM
WeChat applet implements picture upload function With the development of mobile Internet, WeChat applet has become an indispensable part of people's lives. WeChat mini programs not only provide a wealth of application scenarios, but also support developer-defined functions, including image upload functions. This article will introduce how to implement the image upload function in the WeChat applet and provide specific code examples. 1. Preparatory work Before starting to write code, we need to download and install the WeChat developer tools and register as a WeChat developer. At the same time, you also need to understand WeChat
Steps to implement image uploading and display using CakePHP framework
Jul 29, 2023 pm 04:21 PM
Steps to implement image upload and display using CakePHP framework Introduction: In modern web applications, image upload and display are common functional requirements. The CakePHP framework provides developers with powerful functions and convenient tools, making it simple and efficient to upload and display images. This article will introduce you to how to use the CakePHP framework to upload and display images. Step 1: Create a file upload form First, we need to create a form in the view file for users to upload images. The following is an example of
How to handle image uploading and compression in Vue technology development
Oct 08, 2023 am 10:58 AM
How to handle image uploading and compression in Vue technology development In modern web applications, image uploading is a very common requirement. However, due to network transmission and storage reasons, directly uploading original high-resolution images may result in slow upload speeds and a large waste of storage space. Therefore, uploading and compressing images is very important. In Vue technology development, we can use some ready-made solutions to handle image uploading and compression. The following will introduce how to use vue-upload-comone
How to use PHP and Vue to implement image upload function
Sep 25, 2023 pm 03:17 PM
How to use PHP and Vue to implement the image upload function. In modern web development, the image upload function is a very common requirement. This article will introduce in detail how to use PHP and Vue to implement the image upload function, and provide specific code examples. 1. Front-end part (Vue) First, you need to create a form for uploading images on the front-end. The specific code is as follows:<template><div><inputtype="fil
How to use ThinkPHP6 to upload images
Jun 20, 2023 pm 09:25 PM
With the development of the Internet, image uploading has become an essential feature in website and application development. In the field of PHP, ThinkPHP6 has become a very popular development framework. In this article, we will introduce how to use ThinkPHP6 to implement image upload. 1. Create project and controller First, we need to create a new ThinkPHP6 project. You can use Composer to install it, or you can download the latest version from the official website. After the installation is complete, enter in the console
How to implement image uploading and cropping in Vue technology development
Oct 10, 2023 pm 12:46 PM
How to implement image uploading and cropping in Vue technology development requires specific code examples. In modern web development, image uploading and image cropping are one of the common requirements. As a popular front-end framework, Vue.js provides a wealth of tools and plug-ins to help us achieve these functions. This article will introduce how to implement image uploading and cropping in Vue technology development, and provide specific code examples. The implementation of image upload can be divided into two steps: selecting images and uploading images. In Vue, you can use third-party plugins to simplify this
How to use PHP to implement a simple online image upload and display system
Sep 25, 2023 am 09:21 AM
How to use PHP to implement a simple online image upload and display system. Image upload and display system is one of the commonly used functions of modern websites. This function can be quickly implemented using PHP during the development process. This article will introduce how to use PHP to write a simple online image upload and display system, and provide specific code examples. 1. Create database and tables First, we need to create a database and tables to store uploaded image information. Use the following SQL statement to create a table named "images" and set
Problems encountered in image uploading and cropping when using Vue development
Oct 08, 2023 pm 04:12 PM
Title: Image uploading and cropping problems and solutions in Vue development Introduction: In Vue development, image uploading and cropping are common requirements. This article will introduce the image uploading and cropping problems encountered in Vue development, and give solutions and specific code examples. 1. Image upload problem: Selecting the image upload button cannot trigger the file selection box: This problem is usually because the event is not bound correctly or the bound event does not take effect. You can bind the click event in the template and trigger the file selection box in the corresponding method. Code example:
