使用jquery.form.js实现图片上传的方法

这篇文章主要介绍了使用jquery.form.js实现图片上传的方法,涉及jquery使用表单插件jquery.form.js进行图片上传的提交、类型验证、执行结果回调显示等技巧,非常简单实用,需要的朋友可以参考下

本文实例讲述了使用jquery.form.js实现图片上传的方法。分享给大家供大家参考，具体如下：

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"

"https://www.360docs.net/doc/6813743420.html,/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

$(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='/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='/attached/images/"+response2+"' width='100' height='60'/>");

$("#im2").val(response2);

error:function(msg){

alert("出错了");

}

});

</script>

</head>

<body>

文件上传

文件:

</form>

文件:

</form>

</body>

</html>

希望本文所述对大家jQuery程序设计有所帮助。

js实现图片上传前的预览

js实现图片上传前的预览,实现完美兼容Firefox3,IE6,IE7,IE8和IE9的显示问题 1、脚本，把下面代码加到与之间 Js代码 1.

My identity lies in not knowing who I am ...are made by not following instructions ...can come between us

JS图片切换代码

js 仿淘宝首页最新图片幻灯切换效果 js 仿淘宝首页最新图片幻灯切换效果

您好，北京汽配网首页

北京汽车配件网卖家中心

发布配件信息
上传图片

2、doUpload.jsp <%@ page contentType="text/html; charset=GBK" %> <%@ page import="java.io.*"%> <%@ page import="java.util.*"%> <%@ page import="javax.servlet.*"%> <%@ page import="javax.servlet.http.*"%> upFile <% //定义上载文件的最大字节 int MAX_SIZE = 102400 * 102400; // 创建根路径的保存变量 String rootPath; //声明文件读入类 DataInputStream in = null; FileOutputStream fileOut = null; //取得客户端的网络地址 String remoteAddr = request.getRemoteAddr(); //获得服务器的名字 String serverName = request.getServerName(); //取得互联网程序的绝对地址 String realPath = request.getRealPath(serverName); realPath = realPath.substring(0,https://www.360docs.net/doc/6813743420.html,stIndexOf("/")); //创建文件的保存目录 rootPath = realPath + "/image2/"; //取得客户端上传的数据类型 String contentType = request.getContentType(); try{ if(contentType.indexOf("multipart/form-data") >= 0){ //读入上传的数据 in = new DataInputStream(request.getInputStream()); int formDataLength = request.getContentLength(); if(formDataLength > MAX_SIZE){ out.println("

上传的文件字节数不可以超过" + MAX_SIZE + " "); return; }